SVG marker-mid在路径上的特定点上

Question

我得到了一些在画布上生成pathes的代码。 路径对象看起来与此类似：

<path class="link" d="M450,215.L265,236L225,236" style="stroke-width: 1;"></path>

和视图（a，b，c字母仅用于解释问题）：

我的问题是我想在线条的中间画一些箭头（标记）， 介于＆＃34; a＆＃34;到＆＃34; b＆＃34;， 但是当我创建一个标记并执行marker-mid属性时，它会在b点上生成。

我试图在a和b之间做一些点，但是然后marker-mid在那里和箭头都做了箭头。

来自WEB API文档：

  

marker-mid定义了应绘制的箭头或多标记   在除给定的第一个和最后一个顶点之外的每个顶点处    元素或基本形状。

如何在b点禁用标记？ 或者我如何在a-b之间制作类似箭头的东西？ 谢谢！

Answer 1

有时在任何你喜欢的地方分割路径都不容易。然后，您可以使用startOffset路径上的文字来定位＆＃34;箭头＆＃34;在路上的任何一点......

＆＃13;

＆＃13;

path {
  fill: none;
  stroke: red;
  stroke-width: 3
}
text {
  font-size: 35px;
  fill: red;
  dominant-baseline: central
}

＆＃13;

<svg viewBox="0 0 500 500" width="300px" height="300px">
  <path class="link" id="path1" d="M0 0 L200 400A300 300 0 0 1 490 150"></path>
  <text >
    <textPath xlink:href="#path1" startOffset="10%">➤</textPath>
    <textPath xlink:href="#path1" startOffset="20%">➤</textPath>
    <textPath xlink:href="#path1" startOffset="30%">➤</textPath>
    <textPath xlink:href="#path1" startOffset="40%">➤</textPath>
    <textPath xlink:href="#path1" startOffset="50%">➤</textPath>
    <textPath xlink:href="#path1" startOffset="60%">➤</textPath>
    <textPath xlink:href="#path1" startOffset="70%">➤</textPath>
    <textPath xlink:href="#path1" startOffset="80%">➤</textPath>
    <textPath xlink:href="#path1" startOffset="90%">➤</textPath>
  </text>
</svg>

＆＃13;

＆＃13;

＆＃13;

Answer 2

  

marker-mid定义箭头或多边形标记，该箭头或多边形标记应在给定元素或基本形状的第一个和最后一个顶点以外的每个顶点处绘制。

您正在绘制一条顶点为A，B和C的线，因此根据定义，标记将在B处绘制。

如果您想在A和B之间绘制标记，则需要从path到中点A绘制AB到{ {1}}。

B