web-dev-qa-db-fra.com

SVG "fill: url (# ....)" se comportant étrangement dans Firefox

J'ai le graphique SVG suivant:

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

Je définis l'attribut fill de l'élément text par CSS et permute entre les différents dégradés en fonction de l'état de survol. Cela fonctionne très bien dans Chrome & Safari, mais dans Firefox, le texte n'apparaît pas. Lors de l'inspection de l'élément, j'ai découvert que Firefox ajoutait none à la fin de mon attribut CSS fill: url(#...). J'ai essayé de supprimer le mot clé none avec Firebug, mais Firebug supprime simplement l'attribut entier. Pourquoi cela arrive-t-il?

EDIT: Je dois noter que si je supprime le code CSS définissant la propriété fill et codifie en dur l’attribut fill dans l’élément text (et non via un attribut style en ligne), le texte s’affiche correctement dans tous les navigateurs.

cssfirefoxsvggradientfill
20
Nathan Friend

Deviner. Dans mon CSS, je faisais référence aux gradients de la même manière que je faisais référence au remplissage en ligne:

#myselector {
    fill: url('#gradient-id');
}

Pour que cela fonctionne dans Firefox, je devais le changer en ceci:

#myselector {
    fill: url('/#gradient-id');
}

Je ne sais pas pourquoi c'est. Peut-être que cela a quelque chose à voir avec la structure de répertoires contenant ma feuille de style?

38
Nathan Friend

SVG “fill: url (#…)” se comporte étrangement dans Firefox lorsque nous affectons le code ci-dessous avec css (css externe et interne) 

#myselector {
fill: url('#gradient-id');
}

Solution

donner un style en ligne, cela peut être fait dans les deux sens. Manière statique ou dynamique

Manière dynamique 

.attr('fill', 'url(#gradient-id)')

Manière statique

fill="url(#gradient-id)"

En statique, vous devez mettre cela dans le SVG Html;

7
Shailender Singh

J'ai eu le même problème avec linearGradient dans SVG - toujours en 2017. Je suppose, le problème est que Firefox traite url('#gradient-id') comme une URL normale et des règles appliquées de <base href=""/> metatag. Commenter et vérifier ensuite.

0
lukdur