1.需求
2.svg
2.1 预定义形状：
- 矩形 <rect>
- 圆形 <circle>
- 椭圆 <ellipse>
- 线 <line>
- 折线 <polyline>
- 多边形 <polygon>
- 路径 <path>
2.2 path:
2.2.1 d:
- M = moveto // 移动到
M x y ||m dx dy
- L = lineto // 直线
L x y (or l dx dy)
- H = horizontal lineto // 水平线
H x (or h dx)
- V = vertical lineto // 垂直线
V y (or v dy)
- C = curveto // 曲线
C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy)
- S = smooth curveto // 平滑曲线
S x2 y2, x y (or s dx2 dy2, dx dy)
- Q = quadratic Belzier curve // 二次方曲线
Q x1 y1, x y (or q dx1 dy1, dx dy)
- T = smooth quadratic Belzier curveto // 平滑二次方曲线
T x y (or t dx dy)
- A = elliptical Arc // 椭圆弧
A rx ry x-axis-rotation large-arc-flag sweep-flag x y
a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy
//x-axis-rotation 椭圆旋转的角度//large-arc-flag 圆弧的角度 （>180 1 || <180 0 ）
//sweep-flag 圆弧圆心的位置 （左下 1 || 右上 0）
- Z = closepath // 关闭路径
Z (or z)
注：大写表示绝对定位，小写表示相对定位。
2.2.2 style:
- stroke: 轮廓的颜色
- stroke-width: 轮廓的宽度
- fill: 形状内的填充
- dasharray:
- dashoffset: dash模式开始的距离
3. 实现：
3.1 d 指定终点实现
<svg class="svg"width="200px"height="200px"xmlns="http://www.w3.org/2000/svg"> <path d="M 100, 100 m 0, –50 a 50, 50 0 1 1 50, 50" fill="transparent" stroke-linecap="round" stroke="#ffff00" stroke-width="5px" </path></svg>
缺点：需要知道终点的相对位置(x, y)——红色的字体，计算起来比较麻烦。
3.2 stroke-dashoffset 指定弧长实现
<svg class="svg" width="180" height="180" xmlns="http://www.w3.org/2000/svg">
<path d="M 87.5,87.5 m 0, -85 a 85,85 0 1 1 0,170 a 85,85 0 1 1 0,-170"
fill="transparent"
stroke-linecap="round"
stroke="#ffff00"
stroke-width="5px"
stroke-dasharray="534px,534px"
stroke-dashoffset="512px"
transition="stroke-dashoffset 0.6s ease 0s,
stroke 0.6s ease">
</path>
</svg>
说明：利用stroke-dashoffset 指定dash模式开始的位置：
也就是说，默认情况下，dash长度为534，gap长度为534,
指定后，第一个dash长度变为512,gap长度不变，也就画出了512长度的弧线。