4.1svg节点

节点类型是path,之前是特定的形状

1 .https://www.svgrepo.com/svg/13653/like svg图标网址
2 .关键 shape:path,path:"svg曲线"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/@antv/x6@1.1.1/dist/x6.js"></script>
</head>
<body>
    <h3>基本图形和属性</h3>
    <div id="container">

    </div>
    <script>
        const graph=new X6.Graph({
            container:document.getElementById('container'),
            width:800,
            height:600,
            grid:true,
        })

        graph.addNode({
            x:100,
            y:100,
            width:120,
            height:50,
            label:"W6",
            //里面的文字
            attrs:{
            //图形的样式
                body:{
                    //整个图形的样式,代表rect元素
                    stroke:"#237804",
                    fill:"#eee",
                    rx:10
                    //边的圆角
                },
                label:{
                    //文字的样式,代表text元素
                    text:"新文字",
                    fill:"#333",
                    //文字颜色
                    fontSize:24,
                    //文字颜色

                },
                line:{
                    stroke:"#7c68fc",
                }
            }    
        })

        graph.addNode({
            shape:"path",
            x:100,
            y:100,
            width:100,
            height:100,
            label:"path",
            path:'M 0 5 10 0 C 20 0 20 20 10 20 L 0 15 Z',
            //现在的是这个path出来的图形,随着上面定义的width,height变化而变化
            attrs:{
                body:{
                    fill:"#fff",
                    stroke:'#9254de'
                }
            }
        })

        graph.addNode({
            shape:'path',
            x:360,
            y:100,
            width:100,
            height:100,
            label:"path",
            attrs:{
                body:{
                    fill:'#eee',
                    stroke:"#9254de",
                    d:'M 0 5 10 0 C 20 0 20 20 10 20 L 0 15 Z'
                }
            }
        })

        graph.addNode({
            shape: 'path',
            x: 50,
            y: 180,
            width: 80,
            height: 80,
            // https://www.svgrepo.com/svg/13653/like
            path:
              'M24.85,10.126c2.018-4.783,6.628-8.125,11.99-8.125c7.223,0,12.425,6.179,13.079,13.543c0,0,0.353,1.828-0.424,5.119c-1.058,4.482-3.545,8.464-6.898,11.503L24.85,48L7.402,32.165c-3.353-3.038-5.84-7.021-6.898-11.503c-0.777-3.291-0.424-5.119-0.424-5.119C0.734,8.179,5.936,2,13.159,2C18.522,2,22.832,5.343,24.85,10.126z',
            attrs: {
              body: {
                fill: '#D75A4A',
                stroke: 'none',
              },
            },
          })

          graph.addNode({
            shape: 'path',
            x: 210,
            y: 180,
            width: 80,
            height: 80,
            // https://www.svgrepo.com/svg/13695/star
            path:
              'M26.285,2.486l5.407,10.956c0.376,0.762,1.103,1.29,1.944,1.412l12.091,1.757c2.118,0.308,2.963,2.91,1.431,4.403l-8.749,8.528c-0.608,0.593-0.886,1.448-0.742,2.285l2.065,12.042c0.362,2.109-1.852,3.717-3.746,2.722l-10.814-5.685c-0.752-0.395-1.651-0.395-2.403,0l-10.814,5.685c-1.894,0.996-4.108-0.613-3.746-2.722l2.065-12.042c0.144-0.837-0.134-1.692-0.742-2.285l-8.749-8.528c-1.532-1.494-0.687-4.096,1.431-4.403l12.091-1.757c0.841-0.122,1.568-0.65,1.944-1.412l5.407-10.956C22.602,0.567,25.338,0.567,26.285,2.486z',
            attrs: {
              body: {
                fill: '#ED8A19',
                stroke: 'none',
              },
            },
          })

          graph.addNode({
            shape: 'path',
            x: 370,
            y: 180,
            width: 80,
            height: 80,
            // https://www.svgrepo.com/svg/13692/music-player
            path:
              'M52.104,0.249c-0.216-0.189-0.501-0.275-0.789-0.241l-31,4.011c-0.499,0.065-0.872,0.489-0.872,0.992v6.017v4.212v26.035C17.706,39.285,14.997,38,11.944,38c-5.247,0-9.5,3.781-9.5,8.444s4.253,8.444,9.5,8.444s9.5-3.781,9.5-8.444c0-0.332-0.027-0.658-0.069-0.981c0.04-0.108,0.069-0.221,0.069-0.343V16.118l29-3.753v18.909C48.706,29.285,45.997,28,42.944,28c-5.247,0-9.5,3.781-9.5,8.444s4.253,8.444,9.5,8.444s9.5-3.781,9.5-8.444c0-0.092-0.012-0.181-0.015-0.272c0.002-0.027,0.015-0.05,0.015-0.077V11.227V7.016V1C52.444,0.712,52.32,0.438,52.104,0.249z',
            attrs: {
              body: {
                fill: '#eb2f96',
                stroke: 'none',
              },
            },
          })
        

    </script>
</body>
</html>

多边形

graph.addNode({
            shape: 'polygon',
            x: 40,
            y: 40,
            width: 80,
            height: 80,
            label: 'polygon',
            attrs: {
              body: {
                fill: '#efdbff',
                stroke: '#9254de',
                // 指定 refPoints 属性，多边形顶点随图形大小自动缩放
                // https://x6.antv.vision/zh/docs/api/registry/attr#refpointsresetoffset
                refPoints: '0,10 20,0 20,10 10,20',
              },
            },
          })


          graph.addNode({
            shape: 'polygon',
            x: 40,
            y: 40,
            width: 80,
            height: 80,
            label: 'polygon',
            points:'0,10 20,0 20,10 10,20',
            attrs: {
              body: {
                fill: '#efdbff',
                stroke: '#9254de',
              },
            },
          })

          graph.addNode({
            shape: 'polygon',
            x: 40,
            y: 40,
            width: 80,
            height: 80,
            label: 'polygon',
            points: [
                [0, 10],
                [10, 0],
                [20, 10],
                [10, 20],
            ],
            attrs: {
              body: {
                fill: '#efdbff',
                stroke: '#9254de',
              },
            },
          })
          
          //注:需要最新版本才能

          graph.addNode({
            shape: 'polygon',
            x: 40,
            y: 40,
            width: 80,
            height: 80,
            label: 'polygon',
            points: [
                [0, 10],
                [10, 0],
                [20, 10],
                [10, 20],
            ],
            attrs: {
              body: {
                fill: '#efdbff',
                stroke: '#9254de',
              },
            },
          })

          graph.addNode({
              shape:"polygon",
              x:140,
              y:180,
              width:80,
              height:80,
              attrs:{
                  body:{
                    refPoints:'0,100 50,25 50,75 100,0',
                    fill:'#73d13d',
                    stroke:'#237804' 
                  }
              }
          })

          graph.addNode({
              shape:'polygon',
              x:240,
              y:180,
              width:80,
              height:80,
              points: '100,10 40,198 190,78 10,78 160,198',
              attrs:{
                 body:{
                      fill:"#ffd591",
                      stroke:'#ffa940',
                      fillRule:'evenodd'
                      //这个属性,矩形空间中心掏空,必须是有空间的
                  }
              }
          })

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 206,311评论 6赞 481
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 88,339评论 2赞 382
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 152,671评论 0赞 342
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 55,252评论 1赞 279
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 64,253评论 5赞 371
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,031评论 1赞 285
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,340评论 3赞 399
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,973评论 0赞 259
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 43,466评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,937评论 2赞 323
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,039评论 1赞 333
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,701评论 4赞 323
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,254评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,259评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,485评论 1赞 262
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,497评论 2赞 354
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,786评论 2赞 345

4.1svg节点

节点类型是path,之前是特定的形状

多边形

推荐阅读更多精彩内容