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

Question

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

3

当我使用相对路径绘制SVG中的Bezier曲线时，遇到了一个非常奇怪的问题。起初，我使用绝对路径编写了像这样的路径：

<?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 它们完全不同。但是我认为它们实际上是相同的路径。我错在哪里了？

- Jermmy

贝塞尔曲线在Chrome中全部显示。 - Jermmy

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Paul LeBeau · Accepted Answer

我猜您想知道为什么路径不同？

原因在于您对相对坐标的理解有误。所有相对贝塞尔曲线段中的坐标都是相对于上一段最后一个点（即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>