svg 中path

svg 中path

1. 直线

小写（相对位置）	大写（绝对位置）
M x y	m dx dy	M表示的是Move to
L x y	l dx dy	L是“Line to”
H x	h dx	H，绘制水平线
V y	v dy	V，绘制垂直线
Z	z	“闭合路径命令”Z来简化上面的path

<svg width="100px" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  	<path d="M10 10 H 90 V 90 H 10 L 10 10"/>
	<path d="M10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black"/>
	<path d="M10 10 h 80 v 80 h -80 Z" fill="transparent" stroke="black"/>
</svg>

2. 曲线

2.1 贝塞尔曲线

三次贝塞尔曲线C，三次贝塞尔曲线需要定义一个点和两个控制点。
二次贝塞尔曲线Q，只需要一个控制点，用来确定起点和终点的曲线斜率。

小写（相对位置）	大写（绝对位置）
C x1 y1, x2 y2, x y	c dx1 dy1, dx2 dy2, dx dy	最后一个坐标(x,y)表示的是曲线的终点，另外两个坐标是控制点，(x1,y1)是起点的控制点，(x2,y2)是终点的控制点，控制点描述的是曲线起始点的斜率，曲线上各个点的斜率
S x2 y2, x y	s dx2 dy2, dx dy	S命令可以用来创建与前面一样的三次贝塞尔曲线。如果S命令跟在一个C或S命令后面，则它的第一个控制点会被假设成前一个命令曲线的第二个控制点的中心对称点。如果S命令单独使用，前面没有C或S命令，那当前点将作为第一个控制点。
Q x1 y1, x y	q dx1 dy1, dx dy	二次贝塞尔曲线Q，控制点和终点坐标
T x y	t dx dy	T命令可以用来创建与前面一样的二次贝塞尔曲线，只定义终点

Q:S:

Q:

T：

<svg width="190px" height="160px" version="1.1" xmlns="http://www.w3.org/2000/svg">
	<!--C-->
  	<path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>
  	<!--S-->
  	<path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>
  	<!--Q-->
  	<path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/>
  	<!--T-->
  	<path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/>
</svg>

2.2 弧形

弧形可以视为圆形或椭圆形的一部分。假设，已知椭圆形的长轴半径和短轴半径，并且已知两个点（在椭圆上），根据半径和两点，可以画出两个椭圆，在每个椭圆上根据两点都可以画出两种弧形。仅根据半径和两点，可以画出四种弧形。

A rx ry x-axis-rotation large-arc-flag sweep-flag x y	a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy	A的前两个参数分别是x轴半径和y轴半径，第三个参数表示弧形的旋转情况，large-arc-flag决定弧线是大于还是小于180度，0表示小角度弧，1表示大角度弧。sweep-flag表示弧线的方向，0表示从起点到终点沿逆时针画弧，1表示从起点到终点沿顺时针画弧。最后两个参数是指定弧形的终点，

<svg width="320px" height="320px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path d="M10 315
           L 110 215
           A 30 50 0 0 1 162.55 162.45
           L 172.55 152.45
           A 30 50 -45 0 1 215.1 109.9
           L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/>
</svg>

没有旋转

<svg xmlns="http://www.w3.org/2000/svg" version="1.1 " width=500 height=500>
	<ellipse cx="150" cy="200" rx="30" ry="50"
  style="fill:transparent;stroke:purple;stroke-width:1"/>
	<ellipse cx="136" cy="162" rx="30" ry="50"
  style="fill:transparent;stroke:purple;stroke-width:1"/>
	<path d="M10 315 L 315 10" stroke="black" />
	<path d="M120 205 A 30 50 0 0 0 165.55 160
           " stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/>
</svg> 
</svg>

<?xml version="1.0" standalone="no"?>
<svg width="325px" height="325px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path d="M80 80
           A 45 45, 0, 0, 0, 125 125
           L 125 80 Z" fill="green"/>
  <path d="M230 80
           A 45 45, 0, 1, 0, 275 125
           L 275 80 Z" fill="red"/>
  <path d="M80 230
           A 45 45, 0, 0, 1, 125 275
           L 125 230 Z" fill="purple"/>
  <path d="M230 230
           A 45 45, 0, 1, 1, 275 275
           L 275 230 Z" fill="blue"/>
</svg>