SVG marker points in the wrong direction when changing line orientation

Question

I have lines with arrow head at the end. when the lines point up, right, and down, auto is working to orient the arrow head correctly. When the line goes from right to left, the arrow head ends by pointing right instead of left. Can anyone see why that is? thanks

<marker id="markerArrow" viewBox="0 0 12 12" refX="0" refY="6" 
markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto">
<path d="M 0 0 L 12 6 L 0 12 z" style="fill: blue;" /></marker></defs>

Answer 1

You correctly noticed that the direction of the marker depends on the direction of drawing the line. Your marker is drawn with the tip to the right.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"    xmlns:xlink="http://www.w3.org/1999/xlink"
	  width="300" height="300" viewBox="0 0 200 200" >  
	 
<!--<defs>
 <marker id="markerStart" viewBox="0 0 12 12" refX="0" refY="6" 
markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto">
<path d="M 0 0 L 12 6 L 0 12 z" style="fill: blue;" />
</marker> 

</defs> -->

<path d="M 0 0 L 12 6 L 0 12 z" style="fill: blue;" />
</svg>

The marker can be attached to the beginning of the line - marker-start and to the end of the line -marker-end

The line is drawn from the left M10,100 to the rightL190.100

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"    xmlns:xlink="http://www.w3.org/1999/xlink"
	  width="300" height="300" viewBox="0 0 200 200" >  
	 
<defs>
<marker id="markerStart" viewBox="0 0 12 12" refX="0" refY="6" 
markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto">
<path d="M 0 0 L 12 6 L 0 12 z" style="fill: blue;" />
</marker> 
</defs>

<path d="M10,50 L190,100" stroke="black" marker-start="url(#markerStart)" marker-end="url(#markerStart)"  />
<path d="M 0 0 L 12 6 L 0 12 z" style="fill: blue;"/>
</svg>

Now draw a line in the opposite direction from right to left

<path d="M190,100 L10,100" />

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"    xmlns:xlink="http://www.w3.org/1999/xlink"
	  width="300" height="300" viewBox="0 0 200 200" >  
	 
<defs>
<marker id="markerStart" viewBox="0 0 12 12" refX="0" refY="6" 
markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto">
<path d="M 0 0 L 12 6 L 0 12 z" style="fill: blue;" />
</marker> 
</defs>

<path d="M190,50 L10,100" stroke="black" marker-start="url(#markerStart)" marker-end="url(#markerStart)"  />
<path d="M 0 0 L 12 6 L 0 12 z" style="fill: blue;"/>
</svg>

There are two ways to solve this problem:

1. Draw and define in the section two markers that are directed in different directions and use them depending on the direction of the line

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"    xmlns:xlink="http://www.w3.org/1999/xlink"
	  width="300" height="300" viewBox="0 0 200 200" >  
	 
<defs>
<marker id="markerStart" viewBox="0 0 12 12" refX="0" refY="6" 
markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="0">
<path d="M12 0 L 0 6 L 12 12 z" style="fill: red;" />
</marker>
<marker id="markerEnd" viewBox="0 0 12 12" refX="0" refY="6" 
markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto">
<path d="M 0 0 L 12 6 L 0 12 z" style="fill: blue;" />
</marker> 


</defs>

<path d="M10,100 L190,100" stroke="black" marker-start="url(#markerStart)" marker-end="url(#markerEnd)"  />

     <!-- Marker Start -->
<path d="M12 0 L 0 6 L 12 12 z" style="fill: red;" />
</svg>

2. Rotate one of the markers 180 degrees orient ="180"

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"    xmlns:xlink="http://www.w3.org/1999/xlink"
	  width="300" height="300" viewBox="0 0 200 200" >  
	 
<defs>
<marker id="markerStart" viewBox="0 0 12 12" refX="0" refY="6" 
markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto">
<path d="M 0 0 L 12 6 L 0 12 z" style="fill: blue;" />
</marker> 

<marker id="markerEnd" viewBox="0 0 12 12" refX="0" refY="6" 
markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="180">
<path d="M 0 0 L 12 6 L 0 12 z" style="fill: red;" />
</marker>
</defs>

<path d="M10,100 L190,100" stroke="black" marker-start="url(#markerEnd)" marker-end="url(#markerStart)"  />

</svg>  

Update

Marker-mid

Used only on kinks of the line. On a completely straight line it will not be visible In the example below, marker-mid ="url(#markerRight) is red

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"    xmlns:xlink="http://www.w3.org/1999/xlink"
	  width="300" height="300" viewBox="0 0 200 200" >  
	 
<defs>
<marker id="markerRight" viewBox="0 0 12 12" refX="6" refY="6" 
markerUnits="strokeWidth" markerWidth="10" markerHeight="10" orient="auto-start-reverse">
<path d="M12 0 L 0 6 L 12 12 z" style="fill: red;" />
</marker>
<marker id="markerLeft" viewBox="0 0 12 12" refX="6" refY="6" 
markerUnits="strokeWidth" markerWidth="10" markerHeight="10" orient="auto">
<path d="M 0 0 L 12 6 L 0 12 z" style="fill: blue;" />
</marker> 
</defs>

<path fill="none" d="M10,100 50,50 100,150 180,50 190,150" stroke="black" marker-start="url(#markerLeft)" marker-mid="url(#markerRight)" marker-end="url(#markerLeft)"  />

</svg>