最近需要使用svg绘制圆和圆弧做图标,记录下来,以备后用。使用 pathd属性中的 a来绘制弧度,控制弧长;使用 transform中的 rotate来旋转控制弧的开始角度。

代码实现


    
            

展示效果

svg path画圆
svg path画弧
svg path画弧 + 旋转
svg path画弧 + 弧长
指令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)方向绘制。