web-dev-qa-db-fra.com

Changer la couleur de remplissage SVG: avant ou après CSS

J'ai un graphique SVG mis comme ceci:

a::before { content: url(filename.svg); }

Lorsque je survole la balise, je veux vraiment que le SVG change la couleur de remplissage, sans charger un nouveau fichier SVG, comme je l'ai maintenant:

a:hover::before { content: url(filename_white.svg); }

Est-il possible de réaliser en utilisant JavaScript, jQuery ou simplement du CSS pur que je ne connais pas?

Merci.

javascriptjquerycsssvgpseudo-element
30
mnsth

L'utilisation de la propriété content génère un balisage (non exposé) fonctionnellement équivalent à un svg dans un élément <img>.

Vous ne pouvez pas appliquer de style aux éléments à l'intérieur du document svg car:

  1. les styles ne sont pas autorisés à passer en cascade dans les documents
  2. lors de l'utilisation de <img> (ou content, ou toute propriété d'image css qui fait référence à svg) le document svg n'est pas exposé par les navigateurs pour des raisons de sécurité

Des questions similaires, mais pour background-imageici et ici .

Donc, pour faire ce que vous voulez, vous devez contourner les deux points ci-dessus. Il existe différentes options pour le faire, par exemple en utilisant svg en ligne, en utilisant des filtres (appliqués à <img>) ou en générant différents fichiers svg (ou URI de données), comme dans votre question.

17
Erik Dahlström

La réponse acceptée est incorrecte, cela est en fait possible en appliquant une solution de contournement avec un masque SVG et une couleur d'arrière-plan:

p:after {
  width: 48px;
  height: 48px;
  display: inline-block;
  content: '';
  -webkit-mask: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg) no-repeat 50% 50%;
  mask: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg) no-repeat 50% 50%;
  -webkit-mask-size: cover;
  mask-size: cover;
}

.red:after {
  background-color: red;
}

.green:after {
  background-color: green;
}

.blue:after {
  background-color: blue;
}
<p class="red">red heart</p>
<p class="green">green heart</p>
<p class="blue">blue heart</p>

Vous ne modifiez pas réellement le DOM SVG lui-même, vous changez simplement la couleur d'arrière-plan. De cette façon, vous pouvez même utiliser des images ou des dégradés comme arrière-plan.

Mise à jour

Comme MisterJ l'a mentionné, cette fonctionnalité n'est malheureusement pas largement prise en charge .

Après trois ans, la prise en charge de l'utilisation du préfixe est passée à 93% .

35
lmaooooo