svg 常用属性
在线 svg 运行器
顶级标签 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)" />
