firefox - arc - svg path id

Mozilla(Firefox), Marker, Multiple SVGs

Question

He incluido el diseño gráfico de fuerza de d3 en las pestañas extjs de modo que cada vez que se agrega una nueva pestaña, se genera un nuevo gráfico svg. No hay problema hasta ahora.

Ahora tenía la intención de convertir el gráfico en uno dirigido (agregando un marcador y decirle a las líneas que lo usen)

Cada elemento SVG generado sigue este patrón:

<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>

Con Crome todo funciona bien. Así que llegué a la conmoción que la estructura y la forma en que genero los svgs deberían ser más o menos correctos.

Pero con Firefox, los marcadores solo se mostrarán para la primera svg. (la primera pestaña) Todos los demás svgs no mostrarán ninguna punta de flecha.

"Inspeccionar elementos" me dice que los marcadores están ahí y que las líneas se refieren a ellos.

Y aquí es donde me estoy quedando sin Ideas dónde o qué buscar. :(

Answer 1

Tiene varios ID no distintivos dentro del mismo documento html o svg. Esto no es válido , diferentes UA responden de manera diferente, pero como no está permitido hacer esto, en realidad no importa que sean inconsistentes.