Question

我有这个产生3号的SVG文件。此SVG文件使用命令T（平滑二次贝塞尔曲线），但我喜欢更改为需要控制点的命令Q（二次贝塞尔曲线）。根据文档（http://tutorials.jenkov.com/svg/path-element.html假设控制点与最后使用的控制点相同。我认为这是不正确的。我玩的几个例子他们确实产生了正确的答案，但这些例子包括所有指向排除控制点的同一行）。在该实施例中，383.05,399.92，Q383.05,402.63,381.85,403.27，T375.48,403.9。积分（383.05,399.92），（381.85,403.27）和（375.48,403.9）不在同一条线上。有人能指点我如何解决这个问题吗？任何帮助将非常感谢。由于某种原因，我无法插入svg文件

Answer 1

如果您想知道T路径命令的工作原理，那么正确的查找位置是the SVG specification。 T的定义如下：

从当前点到（x，y）绘制二次贝塞尔曲线。假设控制点是前一个命令相对于当前点的控制点的反射。

“假设控制点与最后使用的控制点相同”

仅当前一个路径命令没有控制点时才会出现这种情况。

在您的情况下，上一个命令有一个控制点。

Q 383.05, 402.63, 381.85, 403.27
T 375.48, 403.9

T的控制点是前一个Q命令（383.05,402.63）的控制点，反映在“当前”点（381.85,403.27）之后。

要计算，请将控制点和当前点之间的差值添加到当前点。

cpX = currentX + (currentX - ctrlX)
    = 381.85 + (381.85 - 383.05) = 380.65
cpY = currentY + (currentY - ctrlY)
    = 403.27 + (403.27 - 402.63) = 403.91

所以等效路径是：

Q 383.05, 402.63, 381.85, 403.27
Q 380.65, 403.91, 375.48, 403.9

<强>演示

path {
  fill: none;
  stroke: red;
}

path:nth-child(2) {
  stroke: black;
  stroke-width: 0.25;
}

<svg viewBox="375 401 8 5">
  <path d="M 380,402
           Q 383.05, 402.63, 381.85, 403.27
           T 375.48, 403.9"/>
  <path d="M 380,402
           Q 383.05, 402.63, 381.85, 403.27
           Q 380.65, 403.91, 375.48, 403.9"/>
</svg>

在SVG中将T命令更改为Q命令

1 个答案: