svg笔记----------path篇

时间:2023-12-16 22:00:44

每个路径都必须以moveto 命令开始

moveto、lineto和closepath

<path d="M 10 10 L 100 10z"/>

大写字母命令的坐标是绝对的,小写字母命令的坐标是相对的。其它情况:

1.z(closepath)命令没有坐标,它的大小写形式效果相同。

2.如果使用小写m(moveto)启动路径,它的坐标会被解析为绝对位置,因为没有参照位置来计算相对位置。

水平线和垂直线很常用,足以成为快捷命令。路径可以使用H 命令加绝对x 坐标,或者h命令加相对x 坐标,来指定一条水平线。类似地,垂直线可以使用V 命令加绝对y 坐标,或者v 命令加相对y 坐标来指定。

下面的路径绘制了一个宽度为15 单位、高度为25 单位的矩形。

<path d="M 12 24 h 15 v 25 h -15 z"/>

我们还可以在水平lineto 和垂直lineto 命令后面放置多个坐标值,但只在使用线标记时才会看到效果,H 25 35 45 和H 45 相同,v 11 13 15 和v 39 相同。

所有不必要的空白都可以消除。命令字母后面不需要空白,因为所有的命令都是一个字母。数字和命令之间不需要空白,因为命令字母并不能作为数字的一部分。正数和负数之间也不需要空白,因为负数的前置减号并不能作为正数的一部分。

圆弧命令以字母A(绝对坐标的缩写)或者a(相对坐标的缩写)开始,后面紧跟以下7个参数。

A 命令的7个参数:
• 点所在椭圆的x 半径和y 半径。
• 椭圆的x 轴旋转角度x-axis-rotation。
• large-arc-flag,决定是绘制长弧线还是短弧线。
• sweep-flag,控制弧线的绘制方向,顺时针或逆时针绘制弧线,得到的结果是一种“镜像”效果
• 终点的x 坐标和y 坐标(起点由最后一个绘制的点或者最后一个moveto 命令确定)