В чем разница между абсолютным и относительным путём 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)