SVG "remplir: url (# ....)" comportement étrange dans Firefox

je le graphique SVG suivant:SVG "remplir: url (# ....)" comportement étrange dans Firefox

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

I définir l'attribut fill de l'élément text par CSS et de basculer entre les différents gradients en fonction de l'état du vol stationnaire. Cela fonctionne très bien dans Chrome & Safari, mais dans Firefox, le texte ne s'affiche pas. Après avoir inspecté 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 souligner que si je retire le CSS qui définit la propriété fill et hardcode l'attribut fill dans l'élément text (et non par un attribut en ligne style), le texte affiche correctement dans tous les navigateurs.

Source

2013-02-27 Nathan Friend

À quoi ressemble votre CSS actuel, pour aller avec ce SVG? Quant à la chose "none", "fill: url (any) none" est la même chose que "fill: url (whatever)"; tous les deux disent que si la chose à l'url n'est pas disponible il n'y a pas de repli et rien ne devrait être peint. –

@BorisZbarsky Merci, je ne savais pas que le 'none' spécifiait ce qu'il se passe quand la première ressource est introuvable. –

Compris. Dans mon CSS, je faisais référence aux gradients de la même manière que je faisant référence à l'origine de la ligne de remplissage:

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

Pour le faire fonctionner dans Firefox, je devais changer à ceci:

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

Vous ne savez pas pourquoi. Peut-être que cela a quelque chose à voir avec la structure du répertoire contenant ma feuille de style?

Source

2013-02-28 14:48:24

Un relatif 'url()' dans une feuille de style est résolu par rapport à la feuille de style. Donc, si votre feuille de style et SVG sont dans des répertoires différents, il est probable que vous ne liez pas du tout le SVG. –

Webkit ne le fait pas correctement et je suis presque sûr que Boris a signalé cela à son bugtracker il y a quelque temps. –

Salut Boris, J'ai aussi ce problème, je vous ai vu commenter fréquemment sur les rapports de bug de Firefox, pouvez-vous expliquer pourquoi fill: url ("# gradient-id") ne trouve pas cet id de gradient dans le dom quand spécifié en css, mais en ligne? Je ne charge pas svgs external sur ma page ... L'implémentation de Chrome est-elle incorrecte? Cela semble être le comportement attendu. – Daniel

SVG « fill: url (# ...) » se comporter bizarrement dans Firefox lorsque nous attribuer le code ci-dessous avec css

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

Solution

donner en ligne (à la fois css externe et interne.) le style, cela peut être fait dans les deux sens. manière

façon dynamique

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

manière statique

fill="url(#gradient-id)"

statique ou dynamique En vous statique devez mettre cela dans le Html SVG;

Source

2014-03-28 16:13:16

Merci. L'autre réponse acceptée ne semble corrigée que lors de l'affichage du svg d'une URL racine (ou vice versa). – Chase

aussi attribut de style fonctionne où css classe doesnt. par exemple .. – luky

-1

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

Source

2017-04-20 08:44:45 lukdur

Il n'y a pas de balise de base dans la question. Cette question concerne la résolution d'une URL dans une feuille de style CSS. Cela résout-il la feuille de style elle-même (comme le dit la spécification CSS) ou le document utilisant cette feuille de style (comme le fait Chrome). –

Bien sûr, ce n'est pas - je pense seulement que cela pourrait être une raison pour laquelle il ne fonctionne pas correctement. C'est une raison dans mon cas. Il ne s'agit pas de feuille de style, mais de l'emplacement de la balise ** id ** (ici ** gradient-id **). Pour certaines raisons, en utilisant le chemin relatif ** # gradient-id ** avec ** base ** metatag a cassé quelque chose et FF ne peut trouver la balise ** gradient-id ** n'importe où. Dans mon cas, il ne fonctionne pas en html (dans svg circle) et en css ou js avec un chemin relatif. Cela marche quand je supprime la balise ** base ** ou que je place un chemin absolu dans js comme **. Attr ('stroke', "url (" + window.location.href + "# gradient-id)" ** – lukdur

meta tag affecte aussi Safari @lukdur Alors, quelle est votre solution à ce problème? Définir le chemin absolu? –

SVG "remplir: url (# ....)" comportement étrange dans Firefox

Répondre

Questions connexes