I am new to SVG and I am trying to draw a straight line between two points. I managed so far by using this command:

`&lt;line x1=&quot;50&quot; y1=&quot;50&quot; x2=&quot;150&quot; y2=&quot;150&quot; style=&quot;stroke:rgb(255,255,0); stroke-width:2&quot; stroke-dasharray=&quot;5,3&quot; /&gt;&quot;`

What is the simplest way to add tiny triangles or arrow heads (evenly spaced) over this line in order to indicate the direction?

**Edit 1:**

Just to be more clear, I am not after an arrow at the end of the line, but multiple triangles (evenly spaced) along the whole line. If possible, I would like to replace each dash in the dashed line with a triangle pointing in the direction of the line.

**Edit 2**

Based on Phrogz&#39; suggestion, I created a page as shown below, but nothing is showing up. What am I doing wrong?

    &lt;%@LANGUAGE=&quot;VBSCRIPT&quot; CODEPAGE=&quot;65001&quot;%&gt;
    &lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
    &lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
    &lt;head&gt;
    &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
    &lt;title&gt;Untitled Document&lt;/title&gt;
    &lt;link href=&quot;css/com.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;
    &lt;/head&gt;
    &lt;body style=&quot;background:none;&quot;&gt;
    &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;-10 -10 70 90&quot;&gt;
    &lt;defs&gt;
    &lt;marker id=&quot;t&quot; markerWidth=&quot;4&quot; markerHeight=&quot;4&quot;
            orient=&quot;auto&quot; refY=&quot;2&quot;&gt;
      &lt;path d=&quot;M0,0 L4,2 0,4&quot; /&gt;
    &lt;/marker&gt;
    &lt;/defs&gt;
    &lt;polyline points=&quot;0,0 0,50 20,70 40,10 42,8 44,10, 46,14 50,50&quot; /&gt;
    &lt;/svg&gt;
	&lt;script type=&quot;text/javascript&quot;&gt;
    midMarkers(document.querySelector(&#39;polyline&#39;),6);

		// Given a polygon/polyline, create intermediary points along the
		// &quot;straightaways&quot; spaced no closer than `spacing` distance apart.
		// Intermediary points along each section are always evenly spaced.
		// Modifies the polygon/polyline in place.
		function midMarkers(poly,spacing){
			var svg = poly.ownerSVGElement;
			for (var pts=poly.points,i=1;i&lt;pts.numberOfItems;++i){
				var p0=pts.getItem(i-1), p1=pts.getItem(i);
				var dx=p1.x-p0.x, dy=p1.y-p0.y;
				var d = Math.sqrt(dx*dx+dy*dy);
				var numPoints = Math.floor( d/spacing );
				dx /= numPoints;
				dy /= numPoints;
				for (var j=numPoints-1;j&gt;0;--j){
					var pt = svg.createSVGPoint();
					pt.x = p0.x+dx*j;
					pt.y = p0.y+dy*j;
					pts.insertItemBefore(pt,i);
				}
				if (numPoints&gt;0) i += numPoints-1;
			}
		}
    &lt;/script&gt;
    &lt;/body&gt;
    &lt;/html&gt;

All Svg Marker Solutions on Gang of Coders

Total of 1 Svg Marker Solutions

How to place multiple evenly-spaced arrowheads along an SVG line?