<Path="..."/>
用于定义一个矢量形状。字符串中包含的关键命令不外乎:
下面的命令中,大写说明后面的数值是绝对位置(
Position
),小写表示后面的数值是相对于当前的位置(Shift/Offset
).
M/m
--moveto: 想象【哆啦A梦】,打开【任意门】瞬移到某个位置,因此轨迹是不连续的 --格式: `M x y` 或者 `m dx dy`
L/l
--lineto: 想象【彩虹马】,拖着轨迹走直线 --格式: `L x y` 或者 `l dx dy`
H/h
-- horizontally moveto: 后面不管跟着多少个数值,都将其作为横轴上的(沿直线)移动 -- 格式: `H x1 x2 ... x_n` 或者 `h dx1 dx2 ... dx_n` -- 等价于: `L x1 0 L x2 0 ... L x_n 0` 或者 `l dx1 0 l dx2 0 ... l dx_n 0`
V/v
-- vertically moveto: 后面不管跟着多少个数值,都将其作为纵轴上的(沿直线)移动 -- 格式: `V y1 y2 ... y_n` 或者 `v dy1 dy2 ... dy_n` -- 等价于: `L 0 y1 L 0 y2 ... L 0 y_n` 或者 `l 0 dy1 l 0 dy2 ... l 0 dy_n`
C/c
-- 三次贝塞尔曲线 -- 需要4个点确定一段曲线,除却起点 `x0 y0` 外,还需要标志点1、标志点2、终点 -- 格式:`Cx1 y1 x2 y2 x3 y3` 或者 `c(x1-x0) (y1-y0) (x2-x0) (y2-y0) (x3-x0) (y3-y0)`
下图所示的两个例子:左子图是基于绝对坐标表示的,右子图是基于相对坐标表示的。其中,为了简便表示:1️⃣ 数字与字母之间无空格;2️⃣ 数字之间用逗号隔开;3️⃣ 当第二个数是负数时,逗号省略。如
M320,160c100,-150,200,-150,300,0
=M320,160c100-150,200-150,300,0
S/s
Q/q
-- quadratic Bézier Curve 二次 B-样条曲线 -- 说明我们需要 3 个点,包括当前所在的位置点,还需要两个,因此,其 -- 格式: `Q x1 y1 x2 y2` 或者 `q dx1 dy1 dx2 dy2` -- 其中, dx1 = x1-x0, dx2 = x2-x0 dy1 = y1-y0, dy2 = y2-y0 -- 一个例子如下图:
<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="400" width="450">
<!-- Draw lines -->
<path id="lineAB" d="M 100 350 l 150 -300" stroke="red" stroke-width="1" fill="none" />
<path id="lineBC" d="M 250 50 l 150 300" stroke="red" stroke-width="1" fill="none" />
<path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="4" fill="none" />
<!-- Mark relevant points -->
<g stroke="black" stroke-width="3" fill="black">
<circle id="pointA" cx="100" cy="350" r="3" fill="red" stroke="red" />
<circle id="pointB" cx="250" cy="50" r="3" />
<circle id="pointC" cx="400" cy="350" r="3" />
</g>
<!-- Label the points -->
<g font-size="30" font="sans-serif" fill="black" stroke="none"
text-anchor="middle">
<text x="100" y="350" dx="-30">A</text>
<text x="250" y="50" dy="-10">B</text>
<text x="400" y="350" dx="30">C</text>
</g>
</svg>
</body>
</html>
T/t
A/a
-- 椭圆曲线 -- 参数:(rx ry x-axis-rotation large-arc-flag sweep-flag x y) -- 具体参数表示意义见下页 ppt -- p.s. F12 打开开发者模式调整数据观察图形变化便于理解!!
Z/z
-- close path -- 从最后的一个点直接**沿直线** 回到最近的一个 `M/m` 的位置,构成闭合图行,因此不需要自定任何点的坐标或者偏移 -- 格式: "xxx Z" 或者 "xxx z"
😄😭👷,🙏!
参考:
1️⃣ SVG Path命令属性👍👍
2️⃣ SVGwg.org Path