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>