SVG中的路径数据，即path元素的 d 属性，有一系列的路径绘制指令，其中椭圆弧指令(A)最复杂，不算椭圆弧起始点的x,y坐标的话，依然有 7 个参数。
这个非常之复杂，我主要用它来绘制圆弧，因此需要了解这个的绘制原理，其参数如下：
| 指令 | A (绝对) a (相对) |
|---|---|
| 名称 | elliptical arc 椭圆弧 |
| 参数 | (rx ry x-axis-rotation large-arc-flag sweep-flag x y) |
| rx ry 是椭圆的两个半轴的长度。 | |
| x-axis-rotation 是椭圆相对于坐标系的旋转角度，角度数而非弧度数。 | |
| large-arc-flag 是标记绘制大弧(1)还是小弧(0)部分。 | |
| sweep-flag 是标记向顺时针(1)还是逆时针(0)方向绘制。 | |
| x y 是圆弧终点的坐标。 |
其中小写的a的位置是基于开始绘制的点来算的，也就是说最后的x y的位置是根据目前绘制点的坐标为0 0的时候来计算的，具体实例如下：
<path d="M300,200 h-150 a150,150 0 1,0 150,-150 z"
fill="red" stroke="blue" stroke-width="5" />
<path d="M275,175 v-150 a150,150 0 0,0 -150,150 z"
fill="yellow" stroke="blue" stroke-width="5" />
<path d="M600,350 l 50,-25
a25,25 -30 0,1 50,-25 l 50,-25
a25,50 -30 0,1 50,-25 l 50,-25
a25,75 -30 0,1 50,-25 l 50,-25
a25,100 -30 0,1 50,-25 l 50,-25"
fill="none" stroke="red" stroke-width="5" />
参考链接（https://blog.csdn.net/cuixiping/article/details/79663611）
网友评论