时间戳

首页 > 解决方案 > 如何获得多贝塞尔曲线段的起点？

svg - 如何获得多贝塞尔曲线段的起点？

问题描述

I have such curve as d="m 8.6934523,43.845239 c 0,0 -3.0238096,-6.236608 -3.2127975,-11.90625 C 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 ....”）。我必须将该段表示为视图“mx,y C 5.2916666,26.26.9345 ....”中的另一条曲线。解决方案为“m 0,0 C 5.2916666,26.26.9345 ....”在这种情况下不适合:(并且作为前一段的最后一个控制点的起点不起作用（我相信这是因为切换到绝对坐标）。

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

标签： svgbeziercubic-bezier

解决方案

首先，您需要将 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>

推荐阅读