如何在SVG中获得直线和曲线之间的平滑过渡？

Question

如果我愿意，那么在svg中

<path d="M30 100 Q 80 30, 100 100 T 200 80" fill="none" stroke="black"/>

它平滑现有的贝塞尔曲线终点，以生成另一条在T之后指定终点的贝塞尔曲线。

因此，在这种情况下，T之前的曲线必须是贝塞尔曲线，如果第一条曲线是直线，我可以达到这种效果吗？

我知道我也可以用三次方贝塞尔曲线和二次贝塞尔曲线做到这一点。

只想知道这种情况下是否存在一些捷径，我希望贝塞尔曲线从直线平滑开始或作为任何路径的扩展

Answer 1

您可以使用如下路径命令画一条线：

<path d="M10,10 L90,90" />

您还可以使用二次贝塞尔曲线绘制同一条线。想法是获取该线上点的坐标：在这种情况下，我使用的是x：50，y：50。

 <path d="M10,10 Q50,50 90,90" />

现在您可以使用T命令：

svg{border:1px solid}
path{fill:none; stroke:black;}

<svg viewbox="0 0 250 150">
  <path d="M10,10 Q50,50 90,90T200,80" />
</svg>