SVG markers not working

I have a small marker issue that I can't seem to solve. marker-end

does not render:

Here's the code responsible for defining the marker itself:

  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');

      

        
        
        
      

    

Then here's where I draw the line and reference the marker (the x / y coordinates of the line are set later).

  this.line = container.append('line')
    .classed('arc', true)
    .attr('marker-end', 'url(#arrow)');

      

        
        
        
      

    

And finally, the LESS associated with marker and arc:

#arrow {
  stroke-fill: @light-gray;
  fill: @light-gray;
  stroke-width: 2px;
}

.arc {
  stroke: @light-gray;
  stroke-width: 4px;

  &:hover {
    stroke: @orange;
  }
}

      

        
        
        
      

    

I appreciate any help!

Thank.