Dev Faq
3
votes

Comment changer la couleur SVG quand il s'agit d'une image de fond CSS encodée?

J'ai une icône SVG qui est encodée dans mon fichier CSS. Comment puis-je changer sa couleur en survol sans avoir une icône en double dans une couleur différente?

Dans mon fichier CSS, j'ai: 

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 511.999 511.999'%3E%3Cpath fill='red' d='M83.578 167.256H16.716C7.524 167.256 0 174.742 0 183.971v300.881c0 9.225 7.491 16.713 16.716 16.713h66.862c9.225 0 16.716-7.489 16.716-16.713V183.971c0-9.229-7.525-16.715-16.716-16.715zM470.266 167.256c-2.692-.456-128.739 0-128.739 0l17.606-48.032c12.148-33.174 4.283-83.827-29.424-101.835-10.975-5.864-26.309-8.809-38.672-5.697-7.09 1.784-13.321 6.478-17.035 12.767-4.271 7.233-3.83 15.676-5.351 23.696-3.857 20.342-13.469 39.683-28.354 54.2-25.952 25.311-106.571 98.331-106.571 98.331v267.45h278.593c37.592.022 62.228-41.958 43.687-74.749 22.101-14.155 29.66-43.97 16.716-66.862 22.102-14.155 29.66-43.97 16.716-66.862 38.134-24.423 25.385-84.871-19.172-92.407z'/%3E%3C/svg%3E");

Comme vous pouvez le voir rouge de l'attribut fill = 'red' .

Lorsqu'un utilisateur survole l'icône avec cet arrière-plan SVG, comment puis-je changer sa couleur en bleu? La seule solution que je vois est de créer une autre classe CSS avec le même code SVG sauf avec une couleur de remplissage différente, mais cela ajoute simplement plus à la taille du fichier et semble redondant.

1 commentaires

Pouvez-vous déplacer le svg vers le balisage au lieu qu'il s'agisse d'une background-image ? Si tel est le cas, vous pouvez consulter codepen.io/luiscarvalho/pen/hJFrx

3 Réponses :

3
votes

Vous pouvez utiliser la propriété de filtre: 

<div class="box">

</div>
.box {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 511.999 511.999'%3E%3Cpath fill='red' d='M83.578 167.256H16.716C7.524 167.256 0 174.742 0 183.971v300.881c0 9.225 7.491 16.713 16.716 16.713h66.862c9.225 0 16.716-7.489 16.716-16.713V183.971c0-9.229-7.525-16.715-16.716-16.715zM470.266 167.256c-2.692-.456-128.739 0-128.739 0l17.606-48.032c12.148-33.174 4.283-83.827-29.424-101.835-10.975-5.864-26.309-8.809-38.672-5.697-7.09 1.784-13.321 6.478-17.035 12.767-4.271 7.233-3.83 15.676-5.351 23.696-3.857 20.342-13.469 39.683-28.354 54.2-25.952 25.311-106.571 98.331-106.571 98.331v267.45h278.593c37.592.022 62.228-41.958 43.687-74.749 22.101-14.155 29.66-43.97 16.716-66.862 22.102-14.155 29.66-43.97 16.716-66.862 38.134-24.423 25.385-84.871-19.172-92.407z'/%3E%3C/svg%3E") center/cover no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 511.999 511.999'%3E%3Cpath fill='red' d='M83.578 167.256H16.716C7.524 167.256 0 174.742 0 183.971v300.881c0 9.225 7.491 16.713 16.716 16.713h66.862c9.225 0 16.716-7.489 16.716-16.713V183.971c0-9.229-7.525-16.715-16.716-16.715zM470.266 167.256c-2.692-.456-128.739 0-128.739 0l17.606-48.032c12.148-33.174 4.283-83.827-29.424-101.835-10.975-5.864-26.309-8.809-38.672-5.697-7.09 1.784-13.321 6.478-17.035 12.767-4.271 7.233-3.83 15.676-5.351 23.696-3.857 20.342-13.469 39.683-28.354 54.2-25.952 25.311-106.571 98.331-106.571 98.331v267.45h278.593c37.592.022 62.228-41.958 43.687-74.749 22.101-14.155 29.66-43.97 16.716-66.862 22.102-14.155 29.66-43.97 16.716-66.862 38.134-24.423 25.385-84.871-19.172-92.407z'/%3E%3C/svg%3E") center/cover no-repeat;
  width: 50px;
  height: 50px;
  background:linear-gradient(red,blue);
}

.box:hover {
  background:linear-gradient(yellow,green);
}

Une autre idée est d'utiliser l'icône comme masque et vous pouvez facilement ajuster la couleur en définissant la couleur d'arrière-plan: 

<div class="box">

</div>
.box {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 511.999 511.999'%3E%3Cpath fill='red' d='M83.578 167.256H16.716C7.524 167.256 0 174.742 0 183.971v300.881c0 9.225 7.491 16.713 16.716 16.713h66.862c9.225 0 16.716-7.489 16.716-16.713V183.971c0-9.229-7.525-16.715-16.716-16.715zM470.266 167.256c-2.692-.456-128.739 0-128.739 0l17.606-48.032c12.148-33.174 4.283-83.827-29.424-101.835-10.975-5.864-26.309-8.809-38.672-5.697-7.09 1.784-13.321 6.478-17.035 12.767-4.271 7.233-3.83 15.676-5.351 23.696-3.857 20.342-13.469 39.683-28.354 54.2-25.952 25.311-106.571 98.331-106.571 98.331v267.45h278.593c37.592.022 62.228-41.958 43.687-74.749 22.101-14.155 29.66-43.97 16.716-66.862 22.102-14.155 29.66-43.97 16.716-66.862 38.134-24.423 25.385-84.871-19.172-92.407z'/%3E%3C/svg%3E") center/cover no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 511.999 511.999'%3E%3Cpath fill='red' d='M83.578 167.256H16.716C7.524 167.256 0 174.742 0 183.971v300.881c0 9.225 7.491 16.713 16.716 16.713h66.862c9.225 0 16.716-7.489 16.716-16.713V183.971c0-9.229-7.525-16.715-16.716-16.715zM470.266 167.256c-2.692-.456-128.739 0-128.739 0l17.606-48.032c12.148-33.174 4.283-83.827-29.424-101.835-10.975-5.864-26.309-8.809-38.672-5.697-7.09 1.784-13.321 6.478-17.035 12.767-4.271 7.233-3.83 15.676-5.351 23.696-3.857 20.342-13.469 39.683-28.354 54.2-25.952 25.311-106.571 98.331-106.571 98.331v267.45h278.593c37.592.022 62.228-41.958 43.687-74.749 22.101-14.155 29.66-43.97 16.716-66.862 22.102-14.155 29.66-43.97 16.716-66.862 38.134-24.423 25.385-84.871-19.172-92.407z'/%3E%3C/svg%3E") center/cover no-repeat;
  width: 50px;
  height: 50px;
  background:red;
}

.box:hover {
  background:blue;
}

Vous pouvez même envisager une coloration dégradée: 

<div class="box">

</div>
.box {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 511.999 511.999'%3E%3Cpath fill='red' d='M83.578 167.256H16.716C7.524 167.256 0 174.742 0 183.971v300.881c0 9.225 7.491 16.713 16.716 16.713h66.862c9.225 0 16.716-7.489 16.716-16.713V183.971c0-9.229-7.525-16.715-16.716-16.715zM470.266 167.256c-2.692-.456-128.739 0-128.739 0l17.606-48.032c12.148-33.174 4.283-83.827-29.424-101.835-10.975-5.864-26.309-8.809-38.672-5.697-7.09 1.784-13.321 6.478-17.035 12.767-4.271 7.233-3.83 15.676-5.351 23.696-3.857 20.342-13.469 39.683-28.354 54.2-25.952 25.311-106.571 98.331-106.571 98.331v267.45h278.593c37.592.022 62.228-41.958 43.687-74.749 22.101-14.155 29.66-43.97 16.716-66.862 22.102-14.155 29.66-43.97 16.716-66.862 38.134-24.423 25.385-84.871-19.172-92.407z'/%3E%3C/svg%3E") center/cover;
  width: 50px;
  height: 50px;
}

.box:hover {
  filter: hue-rotate(210deg);
}

2 commentaires

Intéressant. Jamais vu de rotation de teinte () auparavant. Comment cela fonctionnerait-il si je souhaite passer à des couleurs plus spécifiques? Dites que c'est l'initiale # 33af8d et que je veux que la couleur de survol soit # 126d7d? Y a-t-il un type de calculatrice que vous utilisez pour obtenir le bon diplôme?

Hmm je vois. Diriez-vous que la façon dont j'intègre ces SVG en tant qu'images d'arrière-plan encodées est le moyen le plus efficace de le faire? Serait-il plus facile de changer les couleurs si je lie simplement l'image d'arrière-plan à un fichier .SVG?

1
votes

Voici ma solution. J'opte pour un encodage d'URI de données en utilisant encodeURIComponent () . Bien que codé, cela produira un code lisible que vous pourrez manipuler en javascript. Dans ce cas, j'ai écrit une fonction setFill () où, dans l'URI de données, j'ajoute fill='${color}'

<div id="test" ></div>
#test{
width:50px;
height:50px;
border:1px solid;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctitle%3Ethumb up%3C/title%3E%3Cpath d='M0 0h24v24h-24z' fill='none'%3E%3C/path%3E%3Cpath d='M1 21h4v-12h-4v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06l-1.06-1.05-6.58 6.59c-.37.36-.59.86-.59 1.41v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01.01-.08z'%3E%3C/path%3E%3C/svg%3E");  
}
test.addEventListener("mouseover", () => {
  setFill(test, "gold");
});

test.addEventListener("mouseleave", () => {
  setFill(test, "black");
});

function setFill(element, color) {
  element.style.background = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctitle%3Ethumb up%3C/title%3E%3Cpath d='M0 0h24v24h-24z' fill='none'%3E%3C/path%3E%3Cpath fill='${color}' d='M1 21h4v-12h-4v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06l-1.06-1.05-6.58 6.59c-.37.36-.59.86-.59 1.41v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01.01-.08z'%3E%3C/path%3E%3C/svg%3E")`;
}

Ceci est un outil qui vous aide à encoder des SVG en utilisant encodeURIComponent () : Encodeur SVG

0 commentaires
0
votes

J'ai juste essayé quelque chose qui a fonctionné pour moi. 1- Copiez votre code de% 3Csvg vers svg% 3E " 2- Allez sur https://mothereff.in/url 3- Collez votre code dans la zone encodée en URL 4- Dans la zone décodée par URL ci-dessus, remplacez le champ de remplissage par la couleur souhaitée au format HEX. 5- Trouvez votre couleur au format encodé dans la zone encodée URL entourée de% 27. Par exemple, '# ff9500' <=>% 27% 23ff9500% 27, donc # ff9500 <=>% 23ff9500. 6-Copiez cette couleur encodée dans votre code encodé et cela devrait fonctionner !! Faites-moi savoir si c'est le cas

0 commentaires

Articles qui pourrait vous intéresser :

Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO
Select2 ne s'affiche pas correctement dans le mode bootstrap
Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
Comment puis-je définir un format pour les nombres d'entrée dans Blazor