css - degrade - SVG "fill: url(#...)" se comporta de forma extraña en Firefox
svg fill pattern (3)
Lo averigué. En mi CSS, me refería a los gradientes de la misma manera que originalmente hacía referencia al relleno en línea:
#myselector {
fill: url(''#gradient-id'');
}
Para que funcione en Firefox, tuve que cambiarlo a esto:
#myselector {
fill: url(''/#gradient-id'');
}
No estoy seguro porque es así. Tal vez tenga algo que ver con la estructura de directorios que contiene mi hoja de estilos?
Tengo el siguiente gráfico SVG:
<svg width=''36'' height=''30''>
<defs>
<linearGradient id="normal-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(81,82,84); stop-opacity:.4"/>
<stop offset="100%" style="stop-color:rgb(81,82,84); stop-opacity:1"/>
</linearGradient>
<linearGradient id="rollover-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(0,105,23); stop-opacity:.5"/>
<stop offset="100%" style="stop-color:rgb(0,105,23); stop-opacity:1"/>
</linearGradient>
<linearGradient id="active-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(0,0,0); stop-opacity:.4"/>
<stop offset="100%" style="stop-color:rgb(0,0,0); stop-opacity:1"/>
</linearGradient>
</defs>
<text x="8" y="25" style="font-size: 29px;" font-family="Arial">hello world</text>
</svg>''
Establecí el atributo de fill del elemento de text través de CSS y cambio entre los diversos gradientes en función del estado de desplazamiento. Esto funciona muy bien en Chrome y Safari, pero en Firefox, el texto no aparece. Al inspeccionar el elemento, descubrí que Firefox no está agregando none al final de mi fill: url(#...) atributo CSS. Intenté eliminar la palabra clave none con Firebug, pero Firebug simplemente elimina el atributo completo. ¿Por qué está pasando esto?
EDITAR: Debo tener en cuenta que si elimino el CSS que establece la propiedad de fill y codifico el atributo de fill en el elemento de text (no a través de un atributo de style línea), el texto se muestra correctamente en todos los navegadores.
SVG "fill: url (# ...)" se comporta de forma extraña en Firefox cuando asignamos el código siguiente con css (tanto css externos como internos).
#myselector {
fill: url(''#gradient-id'');
}
Solución
Dar estilo en línea, esto puede hacerse de ambas maneras. Manera estática o dinámica.
Forma dinámica
.attr(''fill'', ''url(#gradient-id)'')
Forma estática
fill="url(#gradient-id)"
En estática tienes que poner esto en el SVG Html;
Tuve el mismo problema con linearGradient en SVG, aún en 2017. Supongo que el problema es que Firefox trata la url(''#gradient-id'') como la URL normal y las reglas aplicadas de <base href=""/> metatag. Coméntalo y revísalo entonces.