如何获得多贝塞尔曲线段的起点？答案

【问题标题】：How to get start point of segment of polybezier curve?如何获得多贝塞尔曲线段的起点？
【发布时间】：2021-04-17 16:25:27
【问题描述】：

我为d =这样曲线 “M 8.6934523,43.845239Ç0,0 -3.0238096，-6.236608 -3.2127975，-11.90625Ç5.2916666,26.269345 6.047619,17.197916 10.961309,13.418155 15.875,9.6383926 20.032738,8.315476 28.537201,9.0714284”

并且需要在绝对坐标段开始的地方分割曲线（“C 5.2916666,26.26.9345 ....”）。我必须将该段表示为视图“m x,y C 5.2916666,26.26.9345 ....”中的另一条曲线。解决方案为“m 0,0 C 5.2916666,26.26.9345 ....”在这种情况下不适合:(并且作为前一段的最后一个控制点的起点不起作用（我相信这是因为切换到绝对坐标）。

我应该以某种方式计算上一段的起点吗？或者有没有相应的文献（文档中没有数据，除了这种曲线叫做polybezier）？

【问题讨论】：

请注意，您不是在问如何分割曲线，而是在问如何分割 SVG 路径字符串。您只需要在您的 C 前面添加一条 M 指令，您的路径现在就可以成为两个独立的子路径。

标签： svg bezier cubic-bezier

【解决方案1】：

首先，您需要将 d 属性更改为所有绝对坐标（全部大写）。为此，我使用了这个转换器：https://codepen.io/leaverou/pen/RmwzKv

接下来，为了按您需要的点分割它，您需要使用上一个命令中的最后 2 个值来移动到新曲线的命令

svg{width:45vw}

<svg viewBox="5 8 24 35">
<path d="M8.6934523,43.845239C8.6934523,43.845239,5.669642700000001,37.608631,5.4806548,31.938989
C5.2916666,26.269345,6.047619,17.197916,10.961309,13.418155C15.875,9.6383926,20.032738,8.315476,28.537201,9.0714284"/>
</svg>




<svg viewBox="5 8 24 35">
<path d="M8.6934523,43.845239C8.6934523,43.845239,5.669642700000001,37.608631,5.4806548,31.938989"/>
<path fill="red" d="M5.4806548,31.938989C5.2916666,26.269345,6.047619,17.197916,10.961309,13.418155C15.875,9.6383926,20.032738,8.315476,28.537201,9.0714284"/>
</svg>

【讨论】：

请记住，代码答案需要在帖子本身中包含代码，即使有一个实时演示 URL 可以链接到。 Codepen 可能会在一夜之间死掉，这也会无意中使这个答案对未来的访问者完全无用 =)