SVG中使用path画圆需要使用圆形命令。圆形path命令有两个:A和C。其中,A命令用于画整个圆形,而C命令则用于画圆的一部分。
以A命令为例,圆命令的语法为:A rx ry x-axis-rotation large-arc-flag sweep-flag x y。
说明 | |
---|---|
名称 | 椭圆弧(elliptical Arc) |
指令 | A(绝对)a(相对) |
参数 | (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 是圆弧终点的坐标 |
描述 | 从当前点绘制一段椭圆弧到点 (x, y),椭圆的大小和方向由 (rx, ry) 和 x-axis-rotation 参数决定, x-axis-rotation 参数表示椭圆整体相对于当前坐标系统的旋转角度。椭圆的中心坐标 (cx, cy) 会自动进行计算从而满足其它参数约束。large-arc-flag 和 sweep-flag 也被用于圆弧的计算与绘制。 |
下面是一个绘制圆形的例子:
html
<svg viewBox="-50 -50 100 100">
<path d="M0,-50
A50,50 0 1,1 0,50
A50,50 0 1,1 0,-50z"/>
</svg>
其中M命令代表将起始点移动到(0,-50),z命令代表闭合路径。 A命令画了两个半圆,分别从(0,-50)到(0,50)和从(0,50)到(0,-50),组成了一个完整的圆形。
需要注意的是,在使用A命令画圆时,需要分别使用两个半圆来绘制完整的圆形。