svg路径

SVG 路径 - <path>

首先理解一下定义路径时各种字符命令代码的意思：

指令	参数	名称	描述
M	x,y	moveto 移动到	移动虚拟画笔到指定的（x,y）坐标，仅移动不绘制
m	x,y	moveto	同M，但使用相对坐标
L	x,y	lineto 连直线到	从当前画笔所在位置绘制一条直线到指定的（x,y）坐标
l	x,y	lineto	同L，但使用相对坐标
H	x	horizontal lineto 水平连线到	绘制一条水平直线到参数指定的x坐标点，y坐标为画笔的y坐标
h	x	horizontal lineto	同H，但使用相对坐标
V	y	vertical lineto 垂直连线到	从当前位置绘制一条垂直直线到参数指定的y坐标
v	y	vertical lineto	同V，但使用相对坐标
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 / 平滑三次方贝塞尔曲线	从当前画笔位置绘制一条三次贝塞尔曲线到参数（x,y）指定的坐标。x2,y2是结束控制点。开始控制点和前一条曲线的结束控制点相同
s	x2,y2 x,y	shorthand / 平滑三次方贝塞尔曲线	同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	无	闭合路径	同Z

注意:所有的这些字符命令都可以用大小写两种形式。大小表示绝对位置，而小写表示相对位置。（相对位置为相对于前一个点的坐标，以前一个点的坐标为起点坐标（0，0））

相对坐标的写法

<svg width="500" height="300"> <path d="M 20 20 l 0 200 l 100 0 l 0 -200 l -100 0" fill="none" stroke="green" stroke-width="2px" /> </svg>

另一种相对坐标写法

<svg width="500" height="300"> <path d="M 20 20 v 200  h 100 v -200 h -100" fill="none" stroke="green" stroke-width="2px" /> </svg>

此外可以用Z简化闭合

 <svg width="500" height="300"> <path d="M 20 20 v 200  h 100 v -200 z" fill="none" stroke="green" stroke-width="2px" /> </svg> 

绝对坐标写法

<svg width="500" height="300"> <path d="M 20 20 L 20 220 L 120 220 L 120 20 L20 20" fill="none" stroke="green" stroke-width="2px" /> </svg>

另一种 绝对坐标写法

<svg width="500" height="300"> <path d="M 20 20 V 220 H 120 V 20 H 20" fill="none" stroke="green" stroke-width="2px" /> </svg>

使用svg画一条组合图

( g用于把相关元素进行组合的容器元素 id="该组的名称" fill="该组填充颜色" opacity="该组不透明度" )

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="400" width="450">
	<g fill="none" >
            <path d="M 20 20 v 200  h 300 v -200 z" fill="green" stroke="black" stroke-width="1" />
            <path d="M 20 160 q 150 -100 300 0 v 60 h -300 z" stroke="#fff" stroke-width="1" fill="#fff" />
	</g>
</svg>