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

Question

我知道大写字母表示绝对值，小写字母表示相对值但我不明白他们两者之间的区别什么时候我可以使用每一种。

例如:当我使用大写字母和小写字母时，这个例子给了我不同的形状。

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

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)