Changer la couleur d'un SVG XML dans background-image ?

Sans Javascript, avec du CSS

L’auteur de ce sujet a trouvé une solution à son problème.
Auteur du sujet

Bonjour,

Actuellement j’utilise un script JS qui clone mes svg. J’ai donc un original et 15 clones où je peux librement faire fill: red; (comme ci dessous) pour changer la couleur de mes svg mais ça me convient pas car je suis obligé de faire un nouvel élément à chaque fois que je veux glisser l’image à un autre endroit.

<style>
svg {
   fill:red;
}
</style>
<div>
    <svg><path d="..."></svg>
    <svg><path d="..."></svg>
    <svg><path d="..."></svg>
    <svg><path d="..."></svg>
</div>

J’ai vu cet article qui permet de faire :

http://jsfiddle.net/bd9j1c6t/

.bg {
  background: url('data:image/svg+xml;utf8,<svg name="vcard_svg" viewBox="0 0 2048 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1024 1131q0-64-9-117.5t-29.5-103-60.5-78-97-28.5q-6 4-30 18t-37.5 21.5-35.5 17.5-43 14.5-42 4.5-42-4.5-43-14.5-35.5-17.5-37.5-21.5-30-18q-57 0-97 28.5t-60.5 78-29.5 103-9 117.5 37 106.5 91 42.5h512q54 0 91-42.5t37-106.5zm-157-520q0-94-66.5-160.5t-160.5-66.5-160.5 66.5-66.5 160.5 66.5 160.5 160.5 66.5 160.5-66.5 66.5-160.5zm925 509v-64q0-14-9-23t-23-9h-576q-14 0-23 9t-9 23v64q0 14 9 23t23 9h576q14 0 23-9t9-23zm0-260v-56q0-15-10.5-25.5t-25.5-10.5h-568q-15 0-25.5 10.5t-10.5 25.5v56q0 15 10.5 25.5t25.5 10.5h568q15 0 25.5-10.5t10.5-25.5zm0-252v-64q0-14-9-23t-23-9h-576q-14 0-23 9t-9 23v64q0 14 9 23t23 9h576q14 0 23-9t9-23zm256-320v1216q0 66-47 113t-113 47h-352v-96q0-14-9-23t-23-9h-64q-14 0-23 9t-9 23v96h-768v-96q0-14-9-23t-23-9h-64q-14 0-23 9t-9 23v96h-352q-66 0-113-47t-47-113v-1216q0-66 47-113t113-47h1728q66 0 113 47t47 113z"></path></svg>');
  height:50px;
  width:50px;
  background-repeat:no-repeat;
}

Puis-je modifier la couleur du svg en CSS (par exemple via une règle similaire à fill:red;) ?

Ou suis-je obligé de passer par un script JS qui modifie le SVG/XML ? Je n’ai pas envie de devoir générer du CSS dynamiquement pour chaque cas.

Bon vol, A.

Édité par A-312

+0 -0

Salut,

Non, tu ne pourras pas modifier la couleur en css ni en javascript, parce que si tu utilises un svg en tant qu’image externe (dans une balise <img> ou dans le css comme tu l’as fait), les balises du svg ne sont pas chargées dans le DOM et ne sont donc pas accessibles.

Il faut mettre la couleur directement dans le svg en ajoutant fill="red" à la balise <path>, comme ceci:

.bg {
  background: url('data:image/svg+xml;utf8,<svg name="vcard_svg" viewBox="0 0 2048 1792" xmlns="http://www.w3.org/2000/svg"><path fill="red" d="M1024 1131q0-64-9-117.5t-29.5-103-60.5-78-97-28.5q-6 4-30 18t-37.5 21.5-35.5 17.5-43 14.5-42 4.5-42-4.5-43-14.5-35.5-17.5-37.5-21.5-30-18q-57 0-97 28.5t-60.5 78-29.5 103-9 117.5 37 106.5 91 42.5h512q54 0 91-42.5t37-106.5zm-157-520q0-94-66.5-160.5t-160.5-66.5-160.5 66.5-66.5 160.5 66.5 160.5 160.5 66.5 160.5-66.5 66.5-160.5zm925 509v-64q0-14-9-23t-23-9h-576q-14 0-23 9t-9 23v64q0 14 9 23t23 9h576q14 0 23-9t9-23zm0-260v-56q0-15-10.5-25.5t-25.5-10.5h-568q-15 0-25.5 10.5t-10.5 25.5v56q0 15 10.5 25.5t25.5 10.5h568q15 0 25.5-10.5t10.5-25.5zm0-252v-64q0-14-9-23t-23-9h-576q-14 0-23 9t-9 23v64q0 14 9 23t23 9h576q14 0 23-9t9-23zm256-320v1216q0 66-47 113t-113 47h-352v-96q0-14-9-23t-23-9h-64q-14 0-23 9t-9 23v96h-768v-96q0-14-9-23t-23-9h-64q-14 0-23 9t-9 23v96h-352q-66 0-113-47t-47-113v-1216q0-66 47-113t113-47h1728q66 0 113 47t47 113z"></path></svg>');
  height:50px;
  width:50px;
  background-repeat:no-repeat;
}
+0 -0

Cette réponse a aidé l’auteur du sujet

Bonjour,

je ne suis jamais les tutos sur css-tricks, c’est toujours chaotique…

essaye de remplacer background par mask (attention à la compatibilité):

.bg {
  background-color: red;
    mask-image: url('data:image/svg+xml;utf8,<svg name="vcard_svg" viewBox="0 0 2048 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1024 1131q0-64-9-117.5t-29.5-103-60.5-78-97-28.5q-6 4-30 18t-37.5 21.5-35.5 17.5-43 14.5-42 4.5-42-4.5-43-14.5-35.5-17.5-37.5-21.5-30-18q-57 0-97 28.5t-60.5 78-29.5 103-9 117.5 37 106.5 91 42.5h512q54 0 91-42.5t37-106.5zm-157-520q0-94-66.5-160.5t-160.5-66.5-160.5 66.5-66.5 160.5 66.5 160.5 160.5 66.5 160.5-66.5 66.5-160.5zm925 509v-64q0-14-9-23t-23-9h-576q-14 0-23 9t-9 23v64q0 14 9 23t23 9h576q14 0 23-9t9-23zm0-260v-56q0-15-10.5-25.5t-25.5-10.5h-568q-15 0-25.5 10.5t-10.5 25.5v56q0 15 10.5 25.5t25.5 10.5h568q15 0 25.5-10.5t10.5-25.5zm0-252v-64q0-14-9-23t-23-9h-576q-14 0-23 9t-9 23v64q0 14 9 23t23 9h576q14 0 23-9t9-23zm256-320v1216q0 66-47 113t-113 47h-352v-96q0-14-9-23t-23-9h-64q-14 0-23 9t-9 23v96h-768v-96q0-14-9-23t-23-9h-64q-14 0-23 9t-9 23v96h-352q-66 0-113-47t-47-113v-1216q0-66 47-113t113-47h1728q66 0 113 47t47 113z"></path></svg>');
  height:50px;
  width:50px;
  mask-repeat: no-repeat;
}

test sur https://codepen.io/shoooryuken/pen/xmYKjb

+0 -0
Auteur du sujet

Si je souhaite mettre un background rouge comment je fais ? Je dois passer par l’élément parent ? De plus le mask s’applique aussi au bordure. :/

Ma solution actuelle : Créer un enfant icon et mettre le svg dedans.

EDIT : Au final je pense utiliser un élément button au lieu d’un input, et de faire button::after pour l’icone.

Édité par A-312

+0 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte