[SOLVED] Marker with same 'id' not working across multiple SVGs in Firefox

Marker with same 'id' not working across multiple SVGs in Firefox

I've embedded d3's force directed graph layout into extjs tabs so that each time a new tab gets added a new graph SVG gets generated. No Problemo so far.

Now I intended to turn the graph into a directed one by adding a marker and tell the lines to use it.

Each generated SVG element follows this pattern:

<svg width="100%" height="100%">

  <defs>
    <marker id="end-arrow" viewBox="0 -5 10 10" refX="6" markerWidth="3" markerHeight="3" orient="auto">
      <path d="M0,-5L10,0L0,5" fill="#ccc"></path>
    </marker>
  </defs>

  <g transform="translate(4,0) scale(1)">
    <line class="link" sig="30.84" style="stroke-width: 3;" x1="538" y1="347" x2="409" y2="467" marker-end="url(#end-arrow)"></line>
    <!-- ... -->
  </g>
</svg>

In Chrome, everything works just fine. So I arrived at the conclusion that the structure and the way I generate the SVGs should be more or less correct.

But in Firefox, the markers will only show for the first SVG (the first tab). All other SVGs won't show any arrowheads.

"Inspect Elements" tells me the markers are there and that the lines are referring to them.

And this is where I'm running out of ideas where or what to look for. :(

Solution

You have multiple non-distinct IDs within the same html or svg document. This is invalid, different UAs respond differently but as you're not allowed to do this, it doesn't really matter that they are inconsistent.