SVG marker-mid on specific point on path

Question

I got some code that generates pathes on canvas. the path objects looks similar to this :

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

and on view (a,b,c letters are just for explaining the problem):

My problem is that I want to draw some arrow (marker) on the middle of the line, between "a" to "b", but when I create a marker and do a marker-mid attribute, its generates on b point.

I've tried to do some point between a and b, but then marker-mid did the arrows both there and both on b point.

from WEB API documentation :

The marker-mid defines the arrowhead or polymarker that shall be drawn at every vertex other than the first and last vertex of the given element or basic shape.

How can I disable the marker on point b? Or how can I make something like arrow between a-b ? Thanks !

How are you drawing your `path`? To use `marker-mid` you'd probably have to split your path up. — Mark, Dec 12 '16 at 17:21

Holger Will · Answer 1 · 2016-12-12T20:34:32.487

22

sometimes its not so easy to split the path at any point you like. Then you can use text on a path with startOffset to position an "arrow" at any point on a path...

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>

edited Dec 12 '16 at 20:34

answered Dec 12 '16 at 20:11

Holger Will

7,228
1
31
39

Thanks , Its works great ! Do you think this is possible to add some circle background behind the textPath ? – Chenko47 Dec 13 '16 at 08:59
1

in combination with webfonts everything is possible... https://cdn.rawgit.com/Holger-Will/misc/master/fonts/test.html – Holger Will Dec 13 '16 at 13:46
1

thats pretty clever – Jabran Saeed Jul 19 '17 at 07:55
This saved me from many complex calculations when I was trying to add start and end markers (arrows) to a d3 generated arc. – Andyweb Feb 10 '21 at 07:20
Thank you for this clever solution @HolgerWill! I used this solution to create arrows using D3 in another post. https://stackoverflow.com/questions/70312716/create-directional-arrows-on-an-svg-path-using-d3/70312717#70312717 – PDill5446 Dec 11 '21 at 05:00

score 2 · Answer 2 · answered Dec 12 '16 at 17:30

The marker-mid defines the arrowhead or polymarker that shall be drawn at every vertex other than the first and last vertex of the given element or basic shape.

You are drawing a line with vertices A, B, and C, so by definition the marker will be drawn at B.

If you want a marker to be drawn between A and B you will need to draw a path from A to the midpoint AB to 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>

SVG marker-mid on specific point on path

2 Answers2

Linked