SVG “fill: url(#...)” se comporte bizarrement dans Firefox

J'ai le texte suivant SVG graphique:

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

J'ai mis le fill attribut de la text élément en CSS et de basculer entre les différents gradients en fonction de l'état de pointage. 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 est en ajoutant none à la fin de mon fill: url(#...) attribut CSS. J'ai essayé de supprimer le none mot-clé avec Firebug, mais Firebug supprime tout l'ensemble de l'attribut. Pourquoi est-ce arrivé?

EDIT:
Je note que si j'ai enlever le CSS qui définit la fill de la propriété, et de coder en dur le fill attribut dans le text élément (et non pas par une ligne style attribut), le texte s'affiche correctement dans tous les navigateurs.

Quel est votre CSS ressembler, pour aller avec SVG? Comme pour le "non" chose "remplissage: url(quoi que) none" est la même chose que "remplir: url(quoi que)"; autant dire que si la chose à l'url n'est pas disponible il n'existe pas de solution de secours et rien ne doit être peint.
Merci, je ne savais pas que la 'none' spécifié ce qui se passe lors de la première ressource n'est pas trouvée.

InformationsquelleAutor Nathan Friend | 2013-02-27

39

Pensé à elle. Dans mon CSS, je faisais allusion à la dégradés de la même manière, j'ai été à l'origine de référencement de le remplir en ligne:
```
#myselector {
    fill: url('#gradient-id');
}
```
Pour qu'il fonctionne dans Firefox, j'ai dû changer à cela:
```
#myselector {
    fill: url('/#gradient-id');
}
```
Ne sais pas pourquoi c'est. Peut-être qu'il a quelque chose à voir avec la structure de répertoire contenant ma feuille de style?
- Un parent url() dans une feuille de style est réglée par rapport à la feuille de style. Donc, si votre feuille de style et SVG sont dans des répertoires différents, les chances sont que vous n'étiez pas en les reliant à la SVG à tous.
- Webkit n'est pas de faire de ce droit, et je suis sûr que Boris a signalé que pour leur bugtracker il y a quelques temps.
- Salut Boris, je suis aussi à avoir ce problème, j'ai vu que vous en commentant fréquemment sur le Firefox de rapports de bug, pouvez-vous expliquer pourquoi remplir: url("#gradient-id") ne trouve pas que le gradient de id dans les dom lorsque cela est spécifié dans le css, mais ne inline? Je ne suis pas le chargement svgs externe sur ma page... Est-Chrome mise en œuvre de ce incorrect? Cela semble comme il devrait être le comportement attendu.
- le fait que l'url est résolu comme prévu lorsqu'il est placé inline style="fill: url(#gradient-id)", mais PAS lorsqu'il est placé dans une feuille de style semble indiquer qu'il s'agit d'un bug, sauf si il y a une nuance de spec mise en œuvre qui me manque
- vous devriez poster cela comme une réponse. Il semble être une solution générale à ce problème.
- Vous m'avez sauvé une quantité incroyable de temps avec cette réponse. Tirait mes cheveux lorsque les gradients de tout simplement ne pas apparaître sur firefox!
- Lorsqu'ils sont placés en ligne, le hachage est par rapport à la page de l'URL actuelle. Dans une feuille de style, il est relatif à la feuille de style de l'URL.
- Oui, c'est relatif. Cela a fonctionné pour moi remplissage: url(./#gradient-id);
- Cela ne fonctionne pas si l'url n'est pas racine. L'ajout de l'attribut `` fill="url(#gradient-id)" ` " directement sur la balise a fait le tour pour moi.
InformationsquelleAutor Nathan Friend
7

SVG “fill: url(#...)” se comporter étrangement dans Firefox quand nous attribuant le code ci-dessous avec les css(à la fois interne et externe css.)
```
#myselector {
    fill: url('#gradient-id');
}
```
Solution

donner inline style, cela peut être fait de deux manières. Statique ou dynamique,

Dynamique
```
.attr('fill', 'url(#gradient-id)')
```
De manière statique
```
fill="url(#gradient-id)" 
```
En statique, vous devez mettre ceci dans le SVG Html;
- Merci. L'autre accepta la réponse semble être la seule à fixer lors de la visualisation de la svg à partir d'une racine de l'url (ou vice versa).
- aussi l'attribut style des œuvres où la classe css ne marche pas. par exemple <path style="stroke: url(#chaleur-gradient)">..
InformationsquelleAutor Shailender Singh
1

J'ai eu le même problème avec linearGradient en SVG – encore en 2017. Je suppose que, le problème, c'est que Firefox traiter url('#gradient-id') comme normal l'URL et appliquer les règles de <base href=""/> metatag. Commentaire et vérifier ensuite.
- Il n'y a pas de base de la balise en question. Cette question est à propos de la résolution d'une url dans une feuille de style CSS. Résout-il à l'encontre de la feuille de style elle-même (comme le CSS, dit) ou le document à l'aide de cette feuille de style (comme Chrome ne).
- Bien sûr, il n'est pas - je ne pense que cela pourrait être une raison pourquoi il ne fonctionne pas correctement. C'est une raison dans mon cas. Il n'est pas sur la feuille de style, mais où le id tag (ici gradient id) est placé. Pour certaines raisons, à l'aide de chemin d'accès relatif #gradient id avec base balise meta s'est cassé quelque chose et FF ne peut pas trouver gradient id balise n'importe où. Dans mon cas, il ne travaille pas dans le html (en svg cercle) et en css ou en js avec chemin d'accès relatif. C'est quand j'supprimer base balise ou définir le chemin d'accès absolu en js comme .attr('le trait", "url("+fenêtre.emplacement.href+"#gradient-id)"
- <base> balise meta affecte également Safari @lukdur. Alors, quelle est votre solution à ce problème? Paramètre le chemin d'accès absolu?
- oui. Je sais que ce n'est pas la solution idéale, mais fonctionne très bien. Ici, vous avez jQuery exemple: $(someCircle).attr('stroke', "url(" + window.location.href + "#gradientId)");
InformationsquelleAutor lukdur

Vous devez vous connecter pour publier un commentaire.