在SVG中使用相对路径绘制贝塞尔曲线

Question

在使用相对路径在 SVG 中绘制贝塞尔曲线时，我遇到了一个非常奇怪的问题。一开始，我写了一个绝对路径这样的路径：

<?xml version="1.0" standalone="no"?> <svg width="190px" height="160px" version="1.1" xmlns="http://www.w3.org/2000/svg"> <path d="M110 110 C 120 120, 140 120, 150 110" stroke="black" fill="transparent"/> </svg>

我得到了这样的曲线： 贝塞尔曲线

但是当我使用 c 的相对路径时，就像这样：

<?xml version="1.0" standalone="no"?> <svg width="190px" height="160px" version="1.1" xmlns="http://www.w3.org/2000/svg"> <path d="M110 110 c 10 10, 20 0, 10 -10" stroke="black" fill="transparent"/> </svg>

我得到了另一个贝塞尔曲线

这是完全不同的。但我认为它们实际上是相同的路径。我怎么了？

Answer 1

你实际上并没有说，但我假设你想知道为什么路径不同（？）

原因是因为您对相对坐标如何工作的假设是错误的。相对贝塞尔曲线段中的所有坐标都相对于最后一段中的最后一个点（即 110,110）表示。不是贝塞尔曲线的最后一点。

<svg width="190px" height="160px">

  <path d="M110 110 C 120 120, 140 120, 150 110" stroke="black" fill="transparent" stroke-width="10"/>

  <path d="M110 110 c 10 10, 30 10, 40 0" stroke="green" fill="transparent" stroke-width="5"/>

</svg>