CODEWITHSUNDEEP
svg
jugglingcats
jugglingcats

Reputation: 749

SVG mid-marker position and angle on linear path

I am using mid-marker to show arrows at each step in an SVG path, but the arrow appears rotated at junction points rather than at the end of each path segment. I would like to draw as if each path segment where a separate line.

Is there any simple way to achieve this?

Example showing the issue:

<svg width="500px" height="500px">
      <defs>
        <marker id="markerArrow" markerWidth="13" markerHeight="13" refX="2" refY="6"
                orient="auto">
          <path d="M2,2 L2,9 L15,6 L2,4" style="fill: #000000;" />
        </marker>
      </defs>

      <path d="M100,10 L150,10 L150,60 L100,60"
            style="stroke: #6666ff; stroke-width: 1px; fill: none;
                   marker-mid: url(#markerArrow);
                   marker-end: url(#markerArrow);
                   "
            />  
    </svg>

https://jsfiddle.net/hztgzjyg/1

Many thanks

Upvotes: 0

Views: 2476

Answers (2)

smalinux
smalinux

Reputation: 1152

mid-marker should be rotated by 45 degrees, this is a reference and demo !

    <svg width="500px" height="500px">
<defs>
    <marker id="markerArrow" markerWidth="12" markerHeight="12" refX="6" refY="6"
           orient="auto">
        <path d="M2,2 L2,9 L15,6 L2,4" style="fill: #f00;" />
    </marker>
</defs>

<path d="M100,10 L150,10 L150,60 L100,60"
      style="stroke: #6666ff; stroke-width: 1px; fill: none;
                   marker-start: url(#markerArrow);
                   marker-mid: url(#markerArrow);
                   marker-end: url(#markerArrow);
                 "

        />  
</svg>

Upvotes: 0

Michael Mullany
Michael Mullany

Reputation: 31750

You need a different marker for your mid marker and your end marker, because the orient=auto angle is calculated differently for mid markers and start/end markers. This example gives you what I think you want - but of course, it only works for right-angled polylines because the refX/Y and marker drawing has to offset the auto orientation (which is designed to orient the marker along the bisect of the angle between each set of path segments).

 <svg width="500px" height="500px">
<defs>
    <marker id="markerArrowMid" markerWidth="13" markerHeight="13" refX="13" refY="0"
           orient="auto">
        
        <polygon points="0,6.5 6.5,13 13,0" fill="black" stroke-width="1" stroke="black" />
        
    </marker>
    
        <marker id="markerArrowEnd" markerWidth="13" markerHeight="13" refX="2" refY="6"
           orient="auto">
        <path d="M2,2 L2,9 L15,6 L2,4" style="fill: #000000;" />
    </marker>
</defs>

<path d="M100,10 L150,10 L150,60 L100,60"
      style="stroke: #6666ff; stroke-width: 1; fill: none;
                   marker-mid: url(#markerArrowMid);
                   marker-end: url(#markerArrowEnd);
                 "

        />  
</svg>

Upvotes: 2

Related Questions