svg 常用属性

在线 svg 运行器

• 在线 svg 运行器：https://www.runoob.com/try/try.php?filename=trysvg_myfirst

顶级标签 svg

<svg width="100" height="100" viewBox="50 50 50 50" xmlns="http://www.w3.org/2000/svg">
  // svg 代码写在这里.....
</svg>

g 标签

• g 标签用于将多个形状捆绑一个组（group），在 g 标签上定义的属性，会被其所有的子元素继承，添加到g元素上的变换也会应用到其所有的子元素上

// 将所有圆都充填为蓝色
 <g fill="blue">
   <circle cx="25" cy="25" r="20" id="1"/>
   <circle cx="50" cy="50" r="20" id="2"/>
 </g>

rect 矩形

• x、y 是盒子坐标，width、height 是宽高，fill 是填充颜色，stroke是边框颜色，stroke-width 是边框宽度；

<rect
  :x="6"
  :y="6"
  :width="6"
  :height="6"
  style="fill: #fff; stroke-width: 1; stroke: #000"
/>

line 绘制直线

• x、y 是盒子坐标，width、height 是宽高，fill 是填充颜色，stroke是边框颜色，stroke-width 是边框宽度；

<line
  :x1="0"
  :y1="6.7"
  :x2="6"
  :y2="6.7"
  style="stroke: #000000; stroke-width: 1"
/>

path 绘制路径

• svg 基本形状中最强大的一个，你可以用它创建线条，曲线，弧形，圆等各种形状，其具有 d 属性，用于指定一系列绘制的命令，命令后面接坐标。

• 动态改变 pathArr 的数据，'M0' 可以字符串拼接而成，

• 方式一：

<path :d="pathArr" style="stroke-width: 0.5" />

pathArr: ['M0', '0', 'L10', '0']

• 方式二：

<path :d="['M0', '0', 'L10', '0']" style="stroke-width: 0.5" />

• 方式三：

<svg width="100px" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <!-- 画笔起点在 (10, 10) 处，然后绘制一个矩形 -->
  <path stroke="green" fill="transparent" stroke-width="5" d="M10,10 H 90 V 90 H 10 L10,10"/>
</svg>

• 方式四：

<path style="stroke-width: 1;"
        :d="'M'+ parseInt(nodeEntity.width*0.2) + ',' + parseInt(nodeEntity.height*0.3) +
          'L'  + parseInt(nodeEntity.width*0.5) + ',' + parseInt(nodeEntity.height*0.1) + 'Z'" />

M（移动绘制点到某坐标）
L（绘制一条直线）
H（绘制一条水平线）
V（绘制一条竖线）
Q（绘制一条二次贝塞尔曲线）
C（绘制一条三次贝塞尔曲线）
Z（闭合）。
以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

image 引用图片

<g>
  <image
    xlink:href="../../../images/picSvgs/DataStoreMemory.svg"
    :x="30"
    :y="30"
    height="25px"
    width="25px"
  />
</g>

text 文本

• x、y 文本横纵坐标，dx、dy 文本水平方向和垂直方向的偏移量，text-anchor 文本对齐方式，fill 是填充颜色，stroke是边框颜色，stroke-width 是边框宽度；；

<text 
  x="100" 
  y="100" 
  text-anchor="middle" 
  stroke-width="0" 
  stroke="#000" 
  fill="#000"
>
Hello World
</text>

circle 圆

• cx、cy 是圆心的横纵坐标，r属性是圆形的半径。

<circle cx="50"  cy="50" r="25" />

ellipse 椭圆

• cx、cy 是圆心横纵坐标，rx和ry属性椭圆的横纵向轴半径；

<ellipse cx="50" cy="50" ry="40" rx="20" />

polygon 多边形

• 绘制一个多边形（必须具备三个顶点或以上）， points 属性指定了多边形每个顶点的坐标，横坐标与纵坐标之间与逗号分隔，点与点之间则用空格分隔。

<polygon points="0,0 100,0 100,100 0,100 0,0"/>

svg标签常用属性

• id 属性

svg 元素的唯一标识，与 html 元素类似

• class 属性

svg 元素的 class 标识，常用于css样式设置，与 html 元素类似

• stroke 属性

定义 svg 元素的描边颜色，例如线条、文本等描边颜色

• stroke-width 属性

定义 svg 元素的描边宽度

• stroke-opacity 属性

定义 svg 元素的描边透明度

• fill 属性

定义 svg 元素的填充颜色

• fill-opacity 属性

定义 svg 元素的填充透明度

• transform 属性

定义 svg 元素的变换，包括移动、旋转、放缩等，与CSS类似，例如:

// 将圆顺时针旋转30度，向左平移30，向下平移40，缩小成原来的0.5倍
<circle cx="25" cy="25" r="20" transform="rotate(30) translate(-30 40) scale(0.5)" />

• 传送门：https://blog.csdn.net/zjw_python/article/details/103276311
• 掘金传送门：https://juejin.cn/post/7025635713265876999#heading-4