SVG基础----绘制SVG PATH元素

1、 PATH元素

SVG的<path>元素用于定义一些复杂的图形。它可以结合使用直线，曲线等来制作各种不规则的图形。

<svg>
  <path d="M50,50
           A30,30 0 0,1 35,20
           L100,100
           M110,110
           L100,0"
        style="stroke:#660000; fill:none;"/>  
        
    <path d="M150,150 L200,200" style="stroke:#1D7DB1;fill" />
</svg>  

所有的这些绘制工作都是在<path>元素中通过d属性来完成的。<d>属性包含了一些用于绘制的命令。在上面的例子中，M命令代表“Move to”（移动到）的意思。A命令代表一个“arc”（弧线）。L命令代表“Line”（直线）。这些命令都由一支“虚拟的画笔”来执行，这支笔可以移动和绘制图形

2、设置和移动虚拟画笔

移动画笔通过M指令来完成

<svg>
  <path d="M50,50"
        style="stroke:#660000; fill:none;"/>  
    <path d="M150,150 L200,200" style="stroke:#1D7DB1;fill" />
</svg> 

将虚拟画笔移动到(50,50)坐标的位置上

3、直线

直线命令是<path>元素最简单的命令。绘制直线使用L或l指令

<svg>
  <path d="M50,50
           L100,100"
        style="stroke:#660000; fill:none;"/>  
    <path d="M150,150 L200,200" style="stroke:#1D7DB1;fill" />
</svg>  

从（50,50）坐标开始绘制一条直线，直线的终点在（100,100）的位置

4、弧线

<svg>
  <path d="M50,50
           A30,50 0 0,1 100,100"
          style="stroke:#660000; fill:none;"/> 
</svg>  

从（50,50）开始绘制弧线，结束点位置在（100,100）

arc(rx,ry x-axis-rotation large-arc-flag,sweep-flag,rx2,ry2)

弧线的半径有A指令的两个数值决定。第一个参数是rx，水平方向上的半径，第二个参数是ry，垂直方向上的半径。

A指令上的第三个参数是x-axis-rotation。这个参数用于设置弧线X轴方向上的旋转。通常不需要改变这个参数，它的默认值为0。

large-arc-flag属性设置为0，这意味着较小的弧线将被绘制

sweep-flag被设置为0，这意味着不镜像弧线（逆时针绘制弧线）

<svg>
    <path d="M30,30 A30,30 0 0,1 70,70" style="stroke:#CD0A0A;fill: none;"/>
    <path d="M30,30 A30,30 0 0,0 70,70" style="stroke:#27AE60;fill: none;"/>
    <path d="M30,30 A30,30 0 1,1 70,70" style="stroke:#191919;fill: none;"/>
    <path d="M30,30 A30,30 0 1,0 70,70" style="stroke:#521E18;fill: none;"/>
</svg>

5、贝兹曲线

绘制二次贝兹曲线使用Q或q命令

<path d="M50,50 Q50,100 100,100"
      style="stroke: #006666; fill:none;"/> 

6、三次贝兹曲线

绘制三次贝兹曲线的命令是C和c

<path d="M50,50 C75,80 125,20 150,50"
      style="stroke: #006666; fill:none;"/>   

7、闭合路径

<path>元素有一个闭合路径的快捷命令。闭合路径是指从最后一个绘制点连线到开始点。这个命令是Z（或z，这里大小写没有区别）

<path d="M50,50 L100,50 L100,100 Z"
    style="stroke: #006666; fill:none;"/> 

 

8、PATH命令

在下面列出了SVG <path>元素的虚拟画笔可以使用的命令。大写的指令通常将参数坐标解析为绝对坐标。小写的指令通常将参数坐标解析为相对坐标

指令	参数	名称	描述
M	x,y	moveto	移动虚拟画笔到指定的（x,y）坐标，仅移动不绘制
m	x,y	moveto	移动虚拟画笔到指定的（x,y）坐标，这个坐标是相对于当前画笔的坐标，仅移动不绘制
L	x,y	lineto	从当前画笔所在位置绘制一条直线到指定的（x,y）坐标
l	x,y	lineto	从当前画笔所在位置绘制一条直线到指定的（x,y）坐标，(x,y)坐标是相对于花瓣位置的点
H	x	horizontal lineto	绘制一条水平直线到参数指定的x坐标点，y坐标为画笔的y坐标
h	x	horizontal lineto	绘制一条水平直线到参数指定的x坐标点（当前x + 指定的x），x坐标相对于当前画笔x坐标
V	y	vertical lineto	从当前位置绘制一条垂直直线到参数指定的y坐标
v	y	horizontal lineto	从当前位置绘制一条垂直直线到参数指定的y坐标，y坐标相对于当前画笔的y坐标
C	x1,y1 x2,y2 x,y	curveto	从当前画笔位置绘制一条三次贝兹曲线到参数（x,y）指定的坐标。x1，y1和x2,y2是曲线的开始和结束控制点，用于控制曲线的弧度
c	x1,y1 x2,y2 x,y	curveto	于大小C指令相同，但是坐标是相对于画笔的坐标
S	x2,y2 x,y	shorthand / smooth curveto	从当前画笔位置绘制一条三次贝兹曲线到参数（x,y）指定的坐标。x2,y2是结束控制点。开始控制点和前一条曲线的结束控制点相同
s	x2,y2 x,y	shorthand / smooth curveto	和大小的S指令相同，但是坐标是相对于当前画笔的坐标点
Q	x1,y1 x,y	二次贝兹曲线	从当前画笔位置绘制一条二次贝兹曲线到参数（x,y）指定的坐标。x1,y1是控制点，用于控制曲线的弧度
q	x1,y1 x,y	二次贝兹曲线	和大小的Q指令相同，但是坐标是相对于当前画笔的坐标点
T	x,y	平滑的二次贝兹曲线	从当前画笔位置绘制一条二次贝兹曲线到参数（x,y）指定的坐标。控制点被假定为最后一次使用的控制点
t	x,y	平滑的二次贝兹曲线	和大小的T指令相同，但是坐标是相对于当前画笔的坐标点
A	rx,ry x-axis-rotation large-arc-flag,sweepflag x,y	椭圆弧线	从当前画笔位置开始绘制一条椭圆弧线到（x,y）指定的坐标。rx和ry分别为椭圆弧线水平和垂直方向上的半径。x-axis-rotation指定弧线绕x轴旋转的度数。它只在rx和ry的值不相同是有效果。large-arc-flag是大弧标志位，取值0或1，用于决定绘制大弧还是小弧。sweep-flag用于决定弧线绘制的方向
a	rx,ry x-axis-rotation large-arc-flag,sweepflag x,y	椭圆弧线	和大写的A指令相同，但是坐标是相对于当前画笔的坐标点
Z	无	闭合路径	从结束点绘制一条直线到开始点，闭合路径
z	无	闭合路径	从结束点绘制一条直线到开始点，闭合路径