[Résolu] Changer la couleur d'un SVG XML dans background-image ? • Forum • Zeste de Savoir

anonyme, mercredi 02 janvier 2019 à 19h54
Modifié

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.

02/01/19 à 19h54
Modifié

+0 -0

Anton62, mercredi 02 janvier 2019 à 20h36

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;
}

02/01/19 à 20h36

+0 -0

anonyme, mercredi 02 janvier 2019 à 23h27

J’utilise la règle sur un hover avec une transition (CSS3), donc c’est assez problématique. :/ Le mettre dans le svg n’est pas possible j’utilise trop de combinaison CSS et certaine ne permettent pas d’avoir le style dans le CSS. :/

02/01/19 à 23h27

+0 -0

Leeroy Jenkins, jeudi 03 janvier 2019 à 09h03

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