Skip to content

SVG画圆之path

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)+
rxry是椭圆的两个半轴长度
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命令画圆时,需要分别使用两个半圆来绘制完整的圆形。