SVG Path（三）弧线命令

弧线命令

• A(rx, ry, xr, laf, sf, x, y) - 绘制弧线

• 参数分析：

• rx - (radius-x)：弧线所在椭圆的 x 半轴长

• ry - (radius-y)：弧线所在椭圆的 y 半轴长

• xr - (xAxis-rotation)：弧线所在椭圆的长轴角度

• laf - (large-arc-flag)：是否选择弧长较长的那一段弧

• sf - (sweep-flag)：是否选择逆时针方向的那一段弧

• x, y：弧的终点位置

案例代码

<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet" viewBox="0, 0, 3000, 3000">
    <path d="M 400 200 A 400 200 0 0 0 300 300" stroke="red" fill="rgba(0, 0, 0, 0)"/>
    <path d="M 400 200 A 400 200 0 1 1 300 300" stroke="blue" fill="rgba(0, 0, 0, 0)"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0, 0, 800, 800">
    <path d="M 100 100 L 160 40 L 160 160 L 100 100 M 160 40 A 50 50 0 0 1 160 160" fill="rgba(0, 0, 0, 0)" stroke="red" />
</svg>