在SVG

时间:2016-07-17 03:18:40

标签: svg path relative bezier

在使用相对路径在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

完全不同。但我认为它们实际上是相同的道路。我有什么问题?

1 个答案:

答案 0 :(得分:4)

你实际上并没有说,但我想你想知道为什么路径不同(?)

原因是因为你对相对坐标的工作方式的假设是错误的。相对贝塞尔曲线段中的所有坐标都相对于最后一个曲线中的最后一个点(即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>