title: SVG Marker Not Working
body: <p>I've got a little issue with a marker that I can't seem to resolve.  The <code>marker-end</code> isn't rendering:</p>
  
  <p>Here's the code responsible for defining the marker itself:</p>
  
  <pre><code>  this.svg.insert('defs', ':first-child')
      .append('marker')
        .attr('id', 'arrow')
        .attr('markerUnits', 'strokeWidth')
        .attr('markerWidth', 12)
        .attr('markerHeight', 12)
        .attr('viewBox', '0 0 12 12')
        .attr('orient', 'auto')
      .append('path')
        .attr('d', 'M0, 0 V12 L12,12 Z');
  </code></pre>
  
  <p>Then here's where I render a line and reference the marker (the x/y coords of the line are set later).</p>
  
  <pre><code>  this.line = container.append('line')
      .classed('arc', true)
      .attr('marker-end', 'url(#arrow)');
  </code></pre>
  
  <p>And lastly LESS related to the marker and arc:</p>
  
  <pre><code>#arrow {
    stroke-fill: @light-gray;
    fill: @light-gray;
    stroke-width: 2px;
  }
  
  .arc {
    stroke: @light-gray;
    stroke-width: 4px;
  
    &amp;:hover {
      stroke: @orange;
    }
  }
  </code></pre>
  
  <p>I appreciate any help!</p>
  
  <p>Thanks.</p>