title: JavaScript/HTML - SVG Arrowhead not showing up on line element
body: <p>I want to create a line with an arrowhead. The line element is contained in a group container in an SVG. I'm using the following code to add the arrow head definition to the SVG.</p>
  <pre><code>var defs = document.createElementNS(&quot;http://www.w3.org/2000/svg&quot;, &quot;defs&quot;);
  var marker = document.createElementNS(
    &quot;http://www.w3.org/2000/svg&quot;,
    &quot;marker&quot;
  );
  marker.setAttributeNS(null, &quot;id&quot;, &quot;triangle&quot;);
  marker.setAttributeNS(null, &quot;refX&quot;, 10);
  marker.setAttributeNS(null, &quot;refY&quot;, 5);
  marker.setAttributeNS(null, &quot;markerUnits&quot;, 110);
  marker.setAttributeNS(null, &quot;markerWidth&quot;, 100);
  marker.setAttributeNS(null, &quot;markerHeight&quot;, 100);
  marker.setAttributeNS(null, &quot;orient&quot;, &quot;auto&quot;);
  var path = document.createElementNS(&quot;http;//www.w3.org/2000/svg&quot;, &quot;path&quot;);
  path.setAttributeNS(null, &quot;stroke&quot;, &quot;black&quot;);
  path.setAttributeNS(null, &quot;d&quot;, &quot;M 0 0 L 10 5 L 0 10 z&quot;);
  marker.appendChild(path);
  defs.appendChild(marker);
  currentSVG.appendChild(defs);
  </code></pre>
  <p>However, the arrow head is not showing up. It shows up only when I open the developer tools and edit the marker defition as SVG and change it slightly to make a change. Without editing in the developer tools, the SVG definiton and the marker-end although present does not show an arrow head.</p>