svg入门关键点整理

本来是想学习一下path的 然后顺便就把svg也都看完了 小整理了一下基础的语法

基本元素 及其属性

1
2
3
4
5
6
7
8
9
10
11
12
13
{
rect: ["x", "y", "rx", "ry", "width", "height"],
circle: ["cx", "cy", "r"],
ellipse: ["cx", "cy", "rx", "ry"],
line: ["x1", "x2", "y1", "y2"],
polyline: ["points"],
polygon: ["points"],
path: ["d"],
text: {
textPath: ["xlink:href", /* 各种样式 */], // 文本排列path 需要 xmlns:xlink="http://www.w3.org/1999/xlink"
tspan: ["x", "dx", "rotate", /* 各种样式 */],
}
}

公共属性

1
["fill", "fill-opacity", "stroke", "stroke-opacity"]

path语法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
M: "M 10 10", // 移动到
"直线": {
L: "L 10 10", // 画直线
H: "H 10", // 水平线
V: "V 10", // 垂直线
Z: "Z", // 闭合
},
"曲线": {
"三次贝塞尔": {
C: "C 20 20 40 20 50 10", // 起点控制点, 终点控制点, 终点
S: "S 40 20 50 10", // 终点控制点, 终点, 起点控制点为前一项控制点的对称点
},
"二次贝塞尔": {
Q: "Q 95 10 180 80", // 控制点, 终点
T: "T 180 80", // 终点, 起点控制点为前一项控制点的对称点
},
"弧线": {
A: "A 30 50 0 0 1 162.55 162.45", // 水平半轴长, 垂直半轴长, 旋转角度, 是否是优弧, 是否顺时针, 终点
}
},
}

关于最后那个弧线 稍微解释下第四和第五个参数 前三个参数 再加上起点和终点 总共五个参数 并不能确定唯一椭圆 如下图

svg-arc

总共产生2两个椭圆 被起点终点的直线分割成四段弧 然后第四个参数和第五个参数一起才能确定 最终需要的一段 反正看了这个图之后对A这个参数就比较清晰了

渐变元素 及其属性

1
2
3
4
5
{
linearGradient: ["x1", "y1", "x2", "y2"], // start stop
radialGradient: ["cx", "cy", "r", "fx", "fy"], // stop r start (center r focus)
stop: ["offset", "stop-color", "stop-opacity"]
}

剪切与遮罩

元素

1
["clipPath", "mask"]

元素属性

1
["clip-path", "mask"] // 可作用在基本元素上

基础变形

属性 transform

可取值

1
["transform", "rotate", "skewX", "scale", "matrix"] // 都为函数