绝对路径和相对路径的SVG路径有什么区别？

Question

我知道绝对路径使用大写字母，相对路径使用小写字母， 但我不理解它们之间的区别以及何时可以使用每种类型。

例如： 当我使用大写字母和小写字母时，此示例会给我不同的形状。

<svg height="210" width="400">
    <path d="M150 0 L75 200 L225 200 Z" />
</svg>

- user10467090

---

MDN：大写字母指定页面上的绝对坐标，小写字母指定相对坐标。 - enxaneta

绝对：「我必须工作到三点钟。」 相对：「我还要再工作三个小时。」 绝对：「向北转。」 相对：「向右转。」 绝对：「踏上线。」 相对：「向前迈两步。」 绝对：「我喜欢客厅保持在20°C（68°F）。」 相对：「我更希望房间温度高十度。」 - Amadan

Answer 1

使用相对（小写）命令时，坐标是相对于上一个路径段的端点计算的。

因此，在您的路径的情况下：

M 150 0
L 75 200
L 225 200
Z

路径经过所列坐标。

然而，使用相对命令将得到以下实际坐标：

              Actual         How this was calculated
             --------------- --------------------------------------
m 150 0       (150, 0)       (0 + 150, 0 + 0)
l 75 200      (225, 200)     (150 + 75, 0 + 200)     (ie. lastX + thisX, lastY + thisY)
l 225 200     (450, 400)     (225 + 225, 200 + 200)
z                            (Z and z have identical behaviour)

- Paul LeBeau