SVG基础知识（三）路径

    所有描述轮廓的数据都放在<path>元素的d属性中（d是data的缩写）。路径数据包括单个字符的命令，比如M表示moveto，L表示lineto，接着是该命令的坐标信息。

1. moveto、lineto和closepath

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

    命令字母为大写的M，紧跟着一个使用逗号或空格分隔的x和y坐标，这个命令用来设置绘制轮廓的“笔”的当前位置。

    moveto命令后面紧跟着一个或多个lineto命令，用大写L表示，它的后面也是由逗号或空格分隔的x和y坐标。

    大写Z表示的closepath命令绘制一条直线回到当前子路径的起点。

    demo

如果使用小写命令字母，坐标会被解析为相对于当前的画笔位置。

2. 路径的快捷方式

    路径可以使用H命令加绝对x坐标，或者h命令加相对x坐标，来指定一条水平线。类似地，垂直线可以使用v命令加绝对y坐标，或者v命令加相对Y坐标来指定。

简写形式	等价的冗长形式	效果
H20	L 20 current_y	绘制一条到绝对位置（20，current_y）的线
h20	l 20 0	绘制一条到（current_x + 20，current_y）的线
V20	L current_x 20	绘制一条到绝对位置（current_x，20）的线
v20	l 0 20	绘制一条到（current_x，current_y + 20）的线

    可以在L或者l后面放多组坐标，正如在<polyline>元素中那样。如果在moveto后面放置多对坐标，除了第一对坐标外，剩下的坐标都会被假设为它们跟在一个lineto后面

    所有不必要的空白都可以消除

  <path>d='M 30 30 L 55 5 80 30 55 55 Z'</path>
  <path>d='M 30 30 25 -25 25 25 -25 25 Z'</path>
  <path>d='M12 24 h 15 v 25 h -15 z'</path>
  <path>d='M12 24h15v25h-15z'</path>
复制代码

3. 椭圆弧

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

• 点所在椭圆的x半径和y半径。
• 椭圆的x轴旋转角度 x-axis-rotation。
• large-arc-flag，如果需要圆弧的角度小于180度，其为0；如果需要圆弧的角度大于或 等于180度，则为1。
• sweep-flag，如果需要弧以负角度绘制则为0，以正角度绘制则为1。
• 终点的x坐标和y坐标（起点由最后一个绘制的点或者最后一个moveto命令确定）。

    demo

4. 路径总结

命令	参数	效果
M m	x y	移动到给定坐标
L l	x y	绘制一条到给定坐标的线。可以提供多组坐标来绘制折线
H h	x	绘制一条到给定x坐标的横线
V v	y	绘制一条到给定y坐标的竖线
A a	rx ry x-axis- rotation large-arc sweep x y	绘制一个从当前点到(x,y)的椭圆弧。椭圆上的x半径为rx，y半径为ry。椭圆旋转ry x-axis-rotation度。如果圆弧小于180度，则large-arc为0；如果大于180度，则为1。如果圆弧按顺时针方向绘制，则sweep为1，否则为0
Q q	x1 y1 x y	绘制一条从当前点到(x,y)，控制点为(xl,yl)的二次贝塞尔曲线
T t	x y	绘制一条从当前点到(x,y)的二次贝塞尔曲线。控制点是前一个Q命令的控制点的中心对称点。如果没有前一条曲线，当前点会被用作控制点
C c	x1 y1 x2 y2 x y	绘制一条从当前点到(x,y)的三次贝塞尔曲线，(x1,y1)为曲线的开始控制点，(x2,y2)为曲线的终点控制点
S s	x2 y2 x y	绘制一条从当前点到(x,y)的三次贝塞尔曲线，使用(x2,y2)作为新端点的控制点。第一个控制点是前一个C命令的终点控制点的中心对称点。如果前一个曲线不存在，当前点会被用作第一个控制点

5.其它

• 路径和填充：fill-rule 文档
• marker元素定义了在特定的元素、元素、元素或者元素上绘制的箭头或者多边标记图形。介绍

转载于:https://juejin.im/post/5a9eb6196fb9a028d042f940