css - degrade - SVG "fill: url(#...)" se comporta de forma extraña en Firefox

svg fill pattern

Question

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.

Answer 1

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?

Answer 2

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;

Answer 3

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.