CODEWITHSUNDEEP
angulard3.jssvg
Patrick Dench
Patrick Dench

Reputation: 921

SVG markers not appearing in Edge and Firefox (D3.js, Angular2)

I'm working on a app using D3.js and having some issues with markers not appearing in Edge/Firefox.

The following SVG is embedded in the page:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" width="100%" height="100%">
  <defs>
    <marker id="Arrow" viewBox="0 0 20 20" refX="0" refY="10" markerWidth="15" markerHeight="10" orient="auto">
      <path d="M 0 0 L 20 10 L 0 20" />
    </marker>
  </defs>
  <path stroke-dasharray="10, 10" d="M 500 500 L 75 75" MARKER-END="url(#Arrow)"/>
</svg>

Which, if I past into an HTML file, works as expected. But win the Angular2 project both IE and Firefox will not show the Marker-end. IE throws an error in the console over the Marker-end attribute unless it is all-caps (XML5619: Incorrect document syntax.). I have tried a class on the path with marker-end specified in CSS - with the same error and same result.

Firefox isn't throwing an XML error, but it isn't showing the marker-end either; it's only appearing in Chrome.

Upvotes: 0

Views: 1067

Answers (1)

Patrick Dench
Patrick Dench

Reputation: 921

Problem solved. Angular2 uses 

<base href="/">

on the page, which fouls the path's ability to find url(#Arrow).

The solution is to add the marker attribute in d3.js and pre-pend the location.href:

renderArrows() {
    var arrows = d3.selectAll('path.arrow');

    arrows.each(function (d) {
      var path = d3.select(this);
      path
      .attr('stroke-linecap', 'round')
      .attr('marker-end', function(d,i){ return "url(" + location.href + "#Arrow)" })
    })
  }

More information here: Using base tag on a page that contains SVG marker elements fails to render marker

Upvotes: 1

Related Questions