SVG Path 命令中的椭圆弧终点为什么使用 -.1 0 而不是 0 0？大小写字母 a 和 z 有什么区别？

深入理解SVG Path路径参数及应用

SVG（可缩放矢量图形）的path元素是创建复杂矢量图形的关键。熟练掌握其路径参数和命令对于高效绘制和动画至关重要。本文通过一个案例，详细阐述path命令的用法。

案例分析：椭圆弧终点坐标及大小写字母

观察以下SVG path命令片段：

<code>offset: path("M 100,0 a 100 100 0 1 1 -.1 0 z");</code>

其中，a命令绘制椭圆弧，z命令闭合路径。关键问题在于：为什么椭圆弧终点坐标为-.1 0而非0 0？a和z为何使用小写而非大写A和Z？

SVG路径命令详解

SVG path命令使用字母表示不同的绘图指令：

• M x y：移动画笔到坐标(x, y)。
• L x y：从当前点绘制直线到(x, y)。
• H x：水平绘制直线到x坐标。
• V y：垂直绘制直线到y坐标。
• Z：闭合路径，连接当前点和起点。
• C x1 y1, x2 y2, x y 或 c dx1 dy1, dx2 dy2, dx dy：绘制三次贝塞尔曲线（大写为绝对坐标，小写为相对坐标）。
• Q x1 y1, x y 或 q dx1 dy1, dx dy：绘制二次贝塞尔曲线（大写为绝对坐标，小写为相对坐标）。
• A rx ry x-axis-rotation large-arc-flag sweep-flag x y 或 a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy：绘制椭圆弧（大写为绝对坐标，小写为相对坐标）。

椭圆弧命令a/A参数解读

a命令参数格式：a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy

百度文心一格

百度推出的AI绘画作图工具

112

查看详情

• rx, ry：椭圆长轴和短轴半径。
• x-axis-rotation：椭圆相对于水平轴的旋转角度。
• large-arc-flag：绘制大弧(1)或小弧(0)。
• sweep-flag：绘制方向，顺时针(1)或逆时针(0)。
• dx, dy：相对于当前位置的x, y偏移量。

案例中a 100 100 0 1 1 -.1 0表示：

• 半径均为100。
• 无旋转。
• 绘制大弧，顺时针方向。
• 终点向左偏移0.1个单位。

使用-.1 0而非0 0是为了避免终点与起点重合，从而确保绘制完整的椭圆弧。SVG在起点和终点重合时会忽略后续绘制。

大小写字母的差异

SVG path命令中，大写字母表示绝对坐标，小写字母表示相对坐标。案例中使用小写a和z表示终点坐标和闭合路径都是相对于当前位置的。

通过以上分析，我们理解了案例中-.1 0和a/z小写的意义，这对于精确运用SVG path命令至关重要。

以上就是SVG Path 命令中的椭圆弧终点为什么使用 -.1 0 而不是 0 0？大小写字母 a 和 z 有什么区别？的详细内容，更多请关注php中文网其它相关文章！