1. A命令
path的A命令用来绘制弧形。
| 属性 | 含义 |
|---|---|
| rx,ry | 椭圆的x,y轴半径 |
| x-axis-rotation | 弧线与x轴夹角 |
| large-arc-flag | 1: 大角度弧线；0：小角度弧线 |
| sweep-flag | 1: 顺时针方向；0：逆时针方向 |
| x,y | 终点x,y坐标 |
2. x-axis-rotation属性
2.1 顺时针旋转30度
2.2 源码
<svg width="520px" height="220px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M80,110 L145,110 A100,50 30 0 1, 297,110 L360,110" stroke="#aa0000" stroke-width="2" fill="none"/>
</svg>
1
2
3
2
3
3. large-arc-flag和sweep-flag属性
3.1 情形一
小角弧度，逆时针
源码
<svg width="520px" height="220px" 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" stroke="#aa0000" stroke-width="1" fill="yellow"/>
</svg>
1
2
3
2
3
3.2 情形二
- 大角弧度，逆时针
- 源码
<svg width="520px" height="220px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M80 80 A 45 45, 0, 1, 0, 125 125 L 125 80 Z" stroke="#aa0000" stroke-width="1" fill="yellow"/>
</svg>
1
2
3
2
3
3.3 情形三
- 小角弧度，顺时针
- 源码
<svg width="520px" height="220px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M80 80 A 45 45, 0, 0, 1, 125 125 L 125 80 Z" stroke="#aa0000" stroke-width="1" fill="yellow"/>
</svg>
1
2
3
2
3
3.4 情形四
- 大角弧度，顺时针
- 源码
<svg width="520px" height="220px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M80 80 A 45 45, 0, 1, 1, 125 125 L 125 80 Z" stroke="#aa0000" stroke-width="1" fill="yellow"/>
</svg>
1
2
3
2
3