python如何画svg路径_svg之path详解
path元素的形状是通过属性d定义的，属性d的值是⼀个“命令+参数”的序列。
每⼀个命令都⽤⼀个关键字母来表⽰，每⼀个命令都有两种表⽰⽅式。
⼀种是⽤**⼤写字母**，表⽰采⽤**绝对定位**。
另⼀种是⽤**⼩写字母**，表⽰采⽤**相对定位**
(例如：从上⼀个点开始，向上移动10px，向左移动7px)
因为属性d采⽤的是⽤户坐标系统，所以不需标明单位。
接下来，来看⼀下各个命令
直线命令
M
【Move to】需要两个参数，分别是需要移动到的点的x轴和y轴的坐标。类似于移动画笔的位置。
M x y //绝对位置
m dx dy //相对位置。后续提到其他命令雷同，故省略不再赘述。
L
【Line to】需要两个参数，分别是⼀个点的x轴和y轴坐标，L命令将会在当前位置和新位置(L前⾯画笔所在的点)之间画⼀条线段。
H 【绘制平⾏线】
V 【绘制垂直线】
这两个命令都只带⼀个参数，标明在x轴或y轴移动到的位置，因为它们都只在坐标轴的⼀个⽅向上移动
Z 【闭合路径】
Z命令会从当前点画⼀条直线到路径的起点。不区分⼤⼩写
看⼀下MDN中给的例⼦：画的是⼀个矩形。
效果图如下：svg图
曲线命令
C
三次贝塞尔曲线。(x,y)表⽰的是曲线的终点，(x1,y1)是起点的控制点，(x2,y2)是终点的控制点。
控制点描述的是曲线起始点的斜率，曲线上各个点的斜率，是从起点斜率到终点斜率的渐变过程。
C x1 y1, x2 y2, x y
有点抽象，可以看⼀下例⼦。(建议⾃⼰拍⼀下代码看看效果)
S
当⼀个点某⼀侧的控制点是它另⼀侧的控制点的对称(以保持斜率不变)，可以使⽤S命令。简写的贝塞尔曲线命令。
如果S命令跟在⼀个C命令或者另⼀个S命令的后⾯，它的第⼀个控制点，就会被假设成前⼀个控制点的对称点。如果S命令单独使⽤，前⾯没有C命令或者另⼀个S命令，那么它的两个控制点就会被假设
为同⼀个点。
S x2 y2, x y
继续扔⼀个栗⼦来看看。【注意】蓝⾊部分是对称的控制点
Q
⼆次贝塞尔曲线Q，只需要⼀个控制点，⽤来确定起点和终点的曲线斜率。因此它需要两组参数，控制点和终点坐标。
Q x1 y1, x y
看⼀下例⼦，(代码中表⽰点的位置没写。)
效果图，path是⿊⾊曲线
T
与S命令相似，是Q命令的简写命令。
与S命令相似，T也会通过前⼀个控制点，推断出⼀个新的控制点。这意味着，在你的第⼀个控制点后⾯，可以只定义终点，就创建出⼀个相当复杂的曲线。
【需要注意】，T命令前⾯必须是⼀个Q命令，或者是另⼀个T命令，才能达到这种效果。如果T单独使⽤，那么控制点就会被认为和终点是同⼀个点，所以画出来的将是⼀条直线。
T x y
还是看例⼦⽐较清楚。
效果图如下：【注意蓝⾊部分是⾃动补全对称的】

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。