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)" />