¿Por qué este SVG anidado no funciona en Firefox?
Estoy creando una hoja de contacto que muestra todos los iconos en una biblioteca. Lo he construido usando SVGs anidados. Aquí tienes una versión mínima:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" viewbox="0 0 200 200">
<svg id="sheet_core" width="200" height="200" x="0" y="0">
<svg width="200" height="200" x="0" y="0">
<symbol id="piece" viewbox="-2.5 -2.5 105 105">
<circle r="50" cx="50" cy="50" data-playerfill="true" fill="#ffffff" stroke-width="5" stroke="#000000"></circle>
</symbol>
<use href="#piece" x="25" y="25" transform="matrix(0.75,0,0,0.75,6.25,6.25)"></use>
<text x="0" y="192.1015625" svgjs:data="{" leading":"1.3"}"="">piece</text>
</svg>
</svg>
</svg>
Esto funciona bien en Chrome y Opera, pero no funciona en Firefox.
Deberías ver esto: https://ibb.co/VT8SSSd.
Pero en Firefox, obtengo esto: https://ibb.co/5L7PP22.
Si inspecciono el código, los elementos <symbol>
están grisados, lo que sugiere que no están siendo referenciados, cuando claramente lo están después. También intenté mover todos los símbolos dentro de un <defs>
global, pero eso tampoco funcionó. ¿Alguna idea de cómo modificar esto para que funcione en Firefox también?
Estas diferencias entre navegadores con SVG son desesperantes, tengo que decirlo.
davy.ai
El problema parece estar en el uso del atributo
xlink
en el espacio de nombresxmlns:xlink
. Firefox ha dejado de usarxlink
y sugiere usar en su lugar el atributohref
. Intenta reemplazarxlink:href
porhref
y verifica si funciona.Aquí está el código actualizado:
¡Espero que esto ayude!