SVG Remplir de ne pas être appliquée dans FireFox

Je n'arrive pas à comprendre pourquoi Firefox est à l'aide de la valeur par défaut svg couleur de remplissage au lieu de la classe de remplissage.

Voici les 3 remplissages lors de l'affichage de la FF inspecteur:

SVG Remplir de ne pas être appliquée dans FireFox

SVG est inséré via

<svg class="icon">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#menu-bag"></use>
</svg>

Il convient de montrer l' .skip-link .icône de remplissage de blanc (#fff), mais c'est en fait à l'aide de la SVG remplir de #002649; Si je change .skip-link .icône .skip-link svg puis il fonctionne très bien. Pourquoi ne puis-je pas utiliser une classe et à la place, mais explicitement état de l'élément??

Ai-je raté quelque chose d'évident sur la façon de Firefox remplit un SVG? Cette CSS fonctionne très bien dans d'autres navigateurs.

S'il vous plaît ajouter un exemple simple à la question en montrant le problème. Un png ne nous permet pas de débogage.
Aussi, nous montrer le code où le SVG est chargé sur la page ... est-il intégré (in-line) ou liée (via la balise img ou autres)?
CSS n'est pas appliquée correctement pour <use> éléments. C'est un bug de longue date.

OriginalL'auteur Gil | 2015-01-09

  1. 3

    Plus universelle de l'option en fonction de la réponse @AmeliaBR fourni, est tout simplement de faire quelque chose le long des lignes de:

    svg use svg { 
    fill: inherit;
}

    qui fera de l'ombre élément hériter de la couleur de remplissage.

    C'est génial. FF devrait.... .....

    OriginalL'auteur Derek Story

  2. 1

    Définir par défaut de votre svg couleur de fond sur le corps ou de la balise html et il sera héritée par défaut, mais vous pouvez facilement le remplacer en utilisant simplement une classe.

    body {
    fill: black;
}
.green {
    fill: green;
}
.red {
    fill: red;
}

    Maintenant suffit d'utiliser la couleur de la classe n'importe où pour changer la couleur de remplissage. Ajoutez de la couleur de la classe pour le svg, ou à une plage ou d'un autre élément enveloppant le svg. Fonctionne dans Firefox aussi. 

    <a href="#" class="skip-link green">
    <svg>
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#menu-bag" />
    </svg>
</a>
<svg height="0" width="0">
    <symbol id="menu-bag" viewBox="-10 -10 20 20">
        <circle r="10" />
    </symbol>
</svg>
    Mains vers le bas, nous avons un gagnant. Cela fonctionne à merveille et considérablement les gouttes de la spécificité de ce qui nous permet d'appliquer le fond à l'échelle mondiale, sans l'aide d'un sélecteur global comme use, path, rect, circle, polygon...etc {.

    OriginalL'auteur user3735371