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

Question

我得到了一些在画布上生成pathes的代码.路径对象看起来类似于:

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

在视图上(a,b,c字母仅用于解释问题):

我的问题是我想在线条的中间,"a"到"b"之间绘制一些箭头(标记),但是当我创建一个标记并执行marker-mid属性时,它会在b点上生成.

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

来自WEB API文档:

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

如何在b点禁用标记？或者我如何在ab之间制作像箭头一样的东西？谢谢 !

Answer 1

有时在任何你喜欢的地方分割路径并不容易.然后,您可以使用路径上的文本在路径startOffset上的任何位置放置"箭头"...

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

<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>

Answer 2

标记中间定义箭头或多标记，应在给定元素或基本形状的第一个和最后一个顶点之外的每个顶点绘制。

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

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

<svg width="200" height="150">
  <defs>
    <marker id="markerArrow" markerWidth="13" markerHeight="13" refX="2" refY="6" orient="auto">
      <path d="M2,2 L2,11 L10,6 L2,2" style="fill: #000;" />
    </marker>
  </defs>
  <path d='M0,0 L50,50 L100, 100' style='marker-mid:url(#markerArrow); stroke: #000'/>
  <path d='M100,100 L125, 100 L150, 100' style='marker-mid:url(#markerArrow); stroke: #000' />
</svg>