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"]  // 都为函数