在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>

我得到了这样的曲线： bezier curve

但是当我使用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>

我还有一个bezier curve

完全不同。但我认为他们实际上是同一条路。我怎么了？

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>

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

Draw Bezier Curve with relative path in SVG

svg

bezier