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

2022-09-13 16:30:08 阅读：419 来源： 互联网

标签：svg 35 192 width stroke attrs 基本操作图形化 fill

主要关键字

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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