SVG marker at a specific point along the path

Question

I have code that generates fixes on the canvas. path objects look something like this:

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

and in the form (letters a, b, c are intended only to explain the problem):

My problem is that I want to draw some arrow (marker) in the middle of the line, between "a" and "b", but when I create a marker and use the marker-mid attribute, it is generated at the b-point.

I tried to make some point between a and b, but then the mid-marker made arrows both there and both on b.

from the WEB API documentation:

The mid-marker defines the arrow or poly-marker, which should be drawn at each vertex other than the first and last vertices of this element or basic shape.

How to disable the marker at point b? Or how can I do something like an arrow between ab? Thank!

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>

Hide result

Answer 2

-mid , , .

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>

Hide result