Javascript SVG将箭头放在贝塞尔曲线上

Question

我有一个立方贝塞尔曲线。而且我不知道如何在箭头中间插入箭头。下面的示例：

我希望它像这样，但带有贝塞尔曲线。我怎样才能做到这一点。 注意：我已经尝试过textPaths，标记。但是没有任何帮助。

Answer 1

您有两个选择：

1. 将您自己的标记放置在正确的位置

2. 将行分成两条路径。一个到第一个标记，另一个到其余的路径。然后在每个路径上分配一个结束标记。

Answer 2

＃1解决方案

感谢@Paul LeBeau，他找到了解决方案并在实现下方：

• 我们制作了两个补丁：一条直线和一条曲线，最后一条 也将有标记。

  <path id="line_Path" d="m20.8 22.9c0 0 47.7-0.3 68.9-0.1" /> <path id="curve_Path" d="m89.5 22.9c0 0 7.3 0 7.3 6.5 0 24 0 65.4 0 65.4 0 0-2.5 7.6 7.1 7.6 29.6 0 77.5 0 77.5 0l0 0"/>

• 为精确定位标记，以下属性是 使用的：refX="10"，refY="5"

<svg  width="200" height="120" viewBox="0 0 200 120" preserveAspectRatio="xMinYMin meet" border="1">
<defs>
<marker id="MarkerArrow" viewBox="0 0 10 10" refX="10" refY="5" markerUnits="userSpaceOnUse" orient="auto" markerWidth="10" markerHeight="10">
<polyline points="0,0 10,5 0,10 3,5" fill="red"/>
</marker>
</defs>
<style>
#line_Path, #curve_Path {
fill:none;
stroke:red;
stroke-width:2;
marker-end:url(#MarkerArrow);
}
</style>

<path id="line_Path" d="m20.8 22.9c0 0 47.7-0.3 68.9-0.1" />
<path id="curve_Path" d="m89.5 22.9c0 0 7.3 0 7.3 6.5 0 24 0 65.4 0 65.4 0 0-2.5 7.6 7.1 7.6 29.6 0 77.5 0 77.5 0l0 0"/> 

</svg>

＃2解决方案

• 您可以绘制箭头作为独立对象

  <polyline id="MarkerArrow" points="0,0 10,5 0,10 3,5" fill="red"/>

• 并在帮助下将其放置在曲线上所需的次数 命令的

  <use xlink:href="#MarkerArrow" x="80" y="18"/>

<svg  width="200" height="120" viewBox="0 0 200 120" preserveAspectRatio="xMinYMin meet" border="1">
<defs>
<polyline id="MarkerArrow" points="0,0 10,5 0,10 3,5" fill="red"/>
</defs>
<path d="m20.8 22.9c0 0 47.7-0.3 68.9-0.1 5.4 0 6.8 2.9 6.9 6.8 0.4 22.6-0.8 45.9 0 66.6 0.2 4.2 2.6 6.5 6.6 6.6C129.1 103.1 180 102.2 180 102.2l0.7 0.5"   style="  fill:none; stroke:red; stroke-width:2; "/>  

<use xlink:href="#MarkerArrow" x="80" y="18"/>
<use xlink:href="#MarkerArrow" x="178" y="97"/>

</svg>