antv-x6图形化建模（二）svg基本操作

主要关键字

width：宽   。height：高  。cx：圆或椭圆x轴中心坐标。cy圆或椭圆y轴中心坐标。r圆形半径。rx椭圆水平半径。ry椭圆垂直半径。x1，y1，x2，y2表示直线的开始和结束位置坐标。points使用于多边形和多线段，由类似200,10 250,190 160,210的多个坐标点构成。d为path的属性用于描述path的走向和方式。style：样式主要包括 fill：填充色，stroke：边的颜色，stroke-width：边的宽度

主要使用的标签

<rect>矩形

 <rect width="300" height="100"
  style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>

 

<ellipse>可以使用圆形，不过椭圆同样可以满足需求

<ellipse cx="300" cy="80" rx="100" ry="50"
  style="fill:yellow;stroke:purple;stroke-width:2"/>

 

<line>直线

<line x1="0" y1="0" x2="200" y2="200"
  style="stroke:rgb(255,0,0);stroke-width:2"/>

 

<polygon>多边形

<polygon points="200,10 250,190 160,210"
  style="fill:lime;stroke:purple;stroke-width:1"/>

 

<polyline>多线段，适用于绘制2d折线图或柱状图

<polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
  style="fill:none;stroke:black;stroke-width:3" />

 

<path>应用范围广，能绘制大部分图形。

<path d="M80 100 L80 170 L100 170 L100 100" style="stroke:balck;fill:white"/>

一个例子

<svg
      xmlns="http://www.w3.org/2000/svg"
      version="1.1"
      width="100%"
      height="50vh"
    >
      <rect
        width="300"
        height="300"
        style="fill: yellow; stroke-width: 1; stroke: rgb(0, 0, 0)"
      />
      <rect
        x="60"
        y="40"
        width="60"
        height="60"
        style="fill: #eee; stroke-width: 6; stroke: cyan"
        rx="20"
        ry="20"
      />
      <rect
        x="180"
        y="40"
        width="60"
        height="60"
        style="fill: #eee; stroke-width: 6; stroke: cyan"
        rx="20"
        ry="20"
      />
      <circle
        cx="150"
        cy="150"
        r="20"
        style="storke: black; stroke-width: 2; fill: rgb(252, 204, 149)"
      />
      <ellipse
        cx="150"
        cy="200"
        rx="100"
        ry="30"
        style="storke: white; stroke-width: 1; fill: red"
      />
      <ellipse cx="150" cy="180" rx="100" ry="20" style="fill: yellow" />
      <!-- <line x1="300" y1="0" x2="0" y2="300" style="stroke:pink;stroke-width:5"/> -->
      <circle cx="230" cy="70" r="60" fill="url(#grad1)" />
      <polygon
        points="150,240 120,280 180,280"
        style="fill: brown; stroke: balck; stroke-width: 2"
      />
      <!-- polyline表示不闭合图形有默认填充色黑色 -->
      <polyline points="0,180 40,180 40,220 80,220 80,260 120,260 120,300" style="fill:yellow;stroke:red;stroke-width:4" />
      <defs>
        <linearGradient id="grad1" x1="0" y1="0" x2="100%" y2="100%">
          <stop offset="0%" style="stop-color: yellow" />
          <stop offset="100%" style="stop-color: cyan" />
        </linearGradient>
      </defs>
    </svg>

 

结合antv-x6的使用方法

this.graphAntv.addNode({
          id:el.name,
          x: cellx,
          y: celly,
          width: cellWidth,
          height: cellHeight,
          attrs:{
            text:{
              text:el.name,
              refX:1,
              refY:-cellHeight/2-10,
              fill:'#000'
            },
           //添加自己的私有属性
    
          },
　　　　　　//此处为由svg处理后的图形数据
          markup
          ,ports:{
            groups:{  
              group1:{
              //使用绝对定位
                position: {
                  name: 'absolute',
                }
              }
            },
            items:ports
          }
        });

markup组成

{
        "tagName": "polyline",
        "attrs": {
            "points": "-45,0 41,0 ",
            "fill": "none",
            "stroke": "rgb(192,192,192)",
            "stroke-width": "0.25"
        }
    },
    {
        "tagName": "polygon",
        "attrs": {
            "points": "45,0 34,-4 34,4 45,0 ",
            "fill": "rgb(192,192,192)",
            "stroke": "rgb(192,192,192)"
        }
    },
    {
        "tagName": "polyline",
        "attrs": {
            "points": "-40,0 -35,0 -35,-35 -15,-35 -15,0 10,0 10,35 30,35 30,0 34,0 ",
            "fill": "none",
            "stroke": "rgb(0,0,0)",
            "stroke-width": "0.25"
        }
    }

 

标签：svg,35,192,width,stroke,attrs,基本操作,图形化,fill
来源： https://www.cnblogs.com/nicelife/p/16689603.html