A/a 弧线命令

详细介绍SVG路径的A弧线命令，包括椭圆弧线的参数含义、大弧标志和扫掠标志的用法。通过实例掌握如何绑制各种弧线图形。 A命令用于绑制椭圆弧线，是SVG中最复杂的路径命令，参数多达7个。

为什么需要A命令

用圆或椭圆元素只能绑制完整的圆或椭圆，无法绑制部分弧线。A命令可以绑制任意角度的椭圆弧。

<path d="M 50,100 A 50,50 0 0 1 150,100" fill="none" stroke="#3498db" stroke-width="2"/>

命令格式

• A rx,ry rotation large-arc sweep x,y：绝对坐标
• a rx,ry rotation large-arc sweep dx,dy：相对坐标

参数详解

四种弧线选择

给定起点、终点和椭圆大小，有四种不同的弧线可以绑制。

<circle cx="100" cy="100" r="4" fill="#2ecc71"/>
<circle cx="200" cy="100" r="4" fill="#2ecc71"/>

<path d="M 100,100 A 50,50 0 0 0 200,100" fill="none" stroke="#3498db" stroke-width="2"/>
<text x="150" y="85" text-anchor="middle" font-size="9" fill="#3498db">小弧逆时针</text>

<path d="M 100,100 A 50,50 0 0 1 200,100" fill="none" stroke="#e74c3c" stroke-width="2"/>
<text x="150" y="125" text-anchor="middle" font-size="9" fill="#e74c3c">小弧顺时针</text>

<circle cx="300" cy="100" r="4" fill="#2ecc71"/>
<circle cx="400" cy="100" r="4" fill="#2ecc71"/>

<path d="M 300,100 A 80,80 0 1 0 400,100" fill="none" stroke="#9b59b6" stroke-width="2"/>
<text x="350" y="85" text-anchor="middle" font-size="9" fill="#9b59b6">大弧逆时针</text>

<path d="M 300,100 A 80,80 0 1 1 400,100" fill="none" stroke="#f39c12" stroke-width="2"/>
<text x="350" y="125" text-anchor="middle" font-size="9" fill="#f39c12">大弧顺时针</text>

<!-- 小弧逆时针 -->
<path d="M 100,100 A 50,50 0 0 0 200,100" fill="none" stroke="#3498db" stroke-width="2"/>

<!-- 小弧顺时针 -->
<path d="M 100,100 A 50,50 0 0 1 200,100" fill="none" stroke="#e74c3c" stroke-width="2"/>

<!-- 大弧逆时针 -->
<path d="M 300,100 A 80,80 0 1 0 400,100" fill="none" stroke="#9b59b6" stroke-width="2"/>

<!-- 大弧顺时针 -->
<path d="M 300,100 A 80,80 0 1 1 400,100" fill="none" stroke="#f39c12" stroke-width="2"/>

大弧标志详解

large-arc = 0（小弧）

选择较短的弧线路径。

<path d="M 50,100 A 60,60 0 0 1 150,100" fill="none" stroke="#3498db" stroke-width="2"/>

large-arc = 1（大弧）

选择较长的弧线路径。

<path d="M 50,100 A 60,60 0 1 1 150,100" fill="none" stroke="#e74c3c" stroke-width="2"/>

扫掠标志详解

sweep = 0（逆时针）

从起点到终点按逆时针方向绑制。

<path d="M 50,100 A 60,60 0 0 0 150,100" fill="none" stroke="#3498db" stroke-width="2"/>

sweep = 1（顺时针）

从起点到终点按顺时针方向绑制。

<path d="M 50,100 A 60,60 0 0 1 150,100" fill="none" stroke="#e74c3c" stroke-width="2"/>

椭圆弧线

rx和ry不相等时绑制椭圆弧。

<path d="M 50,100 A 80,40 0 0 1 250,100" fill="none" stroke="#3498db" stroke-width="2"/>

旋转角度

rotation参数让椭圆旋转。

<path d="M 50,100 A 80,40 0 0 1 250,100" fill="none" stroke="#3498db" stroke-width="2"/>
<path d="M 50,100 A 80,40 45 0 1 250,100" fill="none" stroke="#e74c3c" stroke-width="2"/>

实际应用

圆环进度

<circle cx="75" cy="75" r="60" fill="none" stroke="#ecf0f1" stroke-width="10"/>
<path d="M 75,15 A 60,60 0 1 1 15,75" fill="none" stroke="#3498db" stroke-width="10" stroke-linecap="round"/>
<text x="75" y="80" text-anchor="middle" font-size="20" fill="#333">75%</text>

饼图

<path d="M 100,100 L 100,20 A 80,80 0 0 1 180,100 Z" fill="#3498db"/>
<path d="M 100,100 L 180,100 A 80,80 0 0 1 100,180 Z" fill="#e74c3c"/>
<path d="M 100,100 L 100,180 A 80,80 0 0 1 20,100 Z" fill="#2ecc71"/>
<path d="M 100,100 L 20,100 A 80,80 0 0 1 100,20 Z" fill="#f39c12"/>

笑脸

<circle cx="75" cy="75" r="60" fill="#f1c40f" stroke="#f39c12" stroke-width="2"/>
<circle cx="50" cy="55" r="8" fill="#333"/>
<circle cx="100" cy="55" r="8" fill="#333"/>
<path d="M 40,90 A 35,35 0 0 0 110,90" fill="none" stroke="#333" stroke-width="3" stroke-linecap="round"/>

弧形箭头

<path d="M 120,120 A 60,60 0 0 0 60,60" fill="none" stroke="#3498db" stroke-width="3" stroke-linecap="round"/>
<polygon points="60,60 75,65 70,50" fill="#3498db"/>

相对坐标 a

<path d="M 50,100 a 60,40 0 0 1 100,0 a 60,40 0 0 1 100,0" fill="none" stroke="#9b59b6" stroke-width="2"/>

参数速查表

常见问题

弧线不显示

检查rx和ry是否足够大，如果椭圆太小无法连接起点和终点，弧线不会显示。

弧线方向错误

调整sweep参数，0和1会改变弧线方向。

弧线太长或太短

调整large-arc参数，选择大弧或小弧。

小结

A命令是绑制弧线的强大工具：

• 7个参数控制弧线的各个方面
• large-arc决定弧线长度
• sweep决定弧线方向
• 可以绑制圆弧和椭圆弧
• 适合进度环、饼图、圆角等场景

掌握A命令，就能绑制各种精美的弧形图形。