web-dev-qa-db-fra.com

Changer la couleur de svg

Je veux utiliser cette technique http://css-tricks.com/svg-fallbacks/ et changer la couleur de svg mais je n'ai pas encore réussi à le faire Je mets ceci dans le css mais mon image est toujours noire, peu importe le choix Mon code:

.change-my-color {
  fill: green;
}
<svg>
    <image class="change-my-color" xlink:href="https://svgur.com/i/AFM.svg" width="96" height="96" src="ppngfallback.png" />
</svg>

csssvg
110
Barbara

Vous ne pouvez pas changer la couleur d'une image de cette façon. Si vous chargez SVG en tant qu'image, vous ne pouvez pas modifier son affichage à l'aide de CSS ou de Javascript dans le navigateur.

Si vous souhaitez modifier votre image SVG, vous devez la charger en utilisant <object>, <iframe> ou en utilisant <svg> inline.

Si vous souhaitez utiliser les techniques de la page, vous avez besoin de la bibliothèque Modernizr, où vous pouvez vérifier la prise en charge de SVG et afficher sous condition ou non une image de secours. Vous pouvez ensuite insérer votre fichier SVG et appliquer les styles dont vous avez besoin.

Voir:

#time-3-icon {
   fill: green;
}

.my-svg-alternate {
  display: none;
}
.no-svg .my-svg-alternate {
  display: block;
  width: 100px;
  height: 100px;
  background-image: url(image.png);
}
<svg width="96px" height="96px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<path id="time-3-icon" d="M256,50C142.229,50,50,142.229,50,256c0,113.77,92.229,206,206,206c113.77,0,206-92.23,206-206
	C462,142.229,369.77,50,256,50z M256,417c-88.977,0-161-72.008-161-161c0-88.979,72.008-161,161-161c88.977,0,161,72.007,161,161
	C417,344.977,344.992,417,256,417z M382.816,265.785c1.711,0.297,2.961,1.781,2.961,3.518v0.093c0,1.72-1.223,3.188-2.914,3.505
	c-37.093,6.938-124.97,21.35-134.613,21.35c-13.808,0-25-11.192-25-25c0-9.832,14.79-104.675,21.618-143.081
	c0.274-1.542,1.615-2.669,3.181-2.669h0.008c1.709,0,3.164,1.243,3.431,2.932l18.933,119.904L382.816,265.785z"/>
</svg>

<image class="my-svg-alternate" width="96" height="96" src="ppngfallback.png" />

Vous pouvez intégrer votre fichier SVG, baliser votre image de secours avec un nom de classe (my-svg-alternate):

<svg width="96px" height="96px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<path id="time-3-icon" .../>
</svg>

<image class="my-svg-alternate" width="96" height="96" src="ppngfallback.png" />

Et en CSS, utilisez la classe no-svg de Modernizr (CDN: http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js ) pour vérifier la prise en charge de SVG. S'il n'y a pas de support SVG, le bloc SVG sera ignoré et l'image sera affichée, sinon l'image sera supprimée de l'arborescence DOM (display: none):

.my-svg-alternate {
  display: none;
}
.no-svg .my-svg-alternate {
  display: block;
  width: 100px;
  height: 100px;
  background-image: url(image.png);
}

Ensuite, vous pouvez changer la couleur de votre élément en ligne:

#time-3-icon {
   fill: green;
}
81
helderdarocha

Pour changer la couleur de n'importe quel fichier SVG, vous pouvez directement changer le code svg de ouvrant le fichier svg dans n'importe quel éditeur de texte}. Le code peut ressembler au code ci-dessous 

<?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
    <g>
        <path d="M114.26,436.584L99.023,483h301.953l-15.237-46.416H114.26z M161.629,474.404h-49.592l9.594-29.225h69.223
            C181.113,454.921,171.371,464.663,161.629,474.404z"/>
    /*Some more code goes on*/
    </g>
    </svg>

Vous pouvez observer qu'il existe certaines balises XML telles que chemin, cercle, polygone, etc.. Là, vous pouvez ajouter votre propre couleur avec l'aide de attribut de style. Regardez l'exemple ci-dessous

<path style="fill:#AB7C94;" d="M114.26,436.584L99.023,483h301.953l-15.237-46.416H114.26z M161.629,474.404h-49.592l9.594-29.225h69.223
                C181.113,454.921,171.371,464.663,161.629,474.404z"/>

Ajoutez l'attribut de style à toutes les balises pour que vous puissiez obtenir votre SVG de la couleur requise

120
sushant047

Les étapes que je suis en train de suivre pour changer la couleur d'une SVG:

  • Tout d'abord, ajoutez une image SVG en utilisant les balises img
 <img src="dotted-arrow.svg" class="filter-green"/>

Par exemple, la sortie pour # 00EE00 est 

filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%);
  • Créez une nouvelle classe et ajoutez ce filtre dans cette classe.
.filter-green{
    filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
}
  • Maintenant, ajoutez cette classe à la balise d’image et la couleur de SVG sera remplacée par HEX.
28
Manish Menaria

Ajout d'une page de test - pour colorer SVG via les paramètres de filtre:

E.G filter: invert(0.5) sepia(1) saturate(5) hue-rotate(175deg)

Téléchargez et coloriez votre SVG - Jsfiddle

A pris l'idée de: https://blog.union.io/code/2017/08/10/img-svg-fill/

23
Yonatan Ayalon

le moyen le plus simple serait de créer une police à partir du SVG en utilisant un service tel que https://icomoon.io/app/#/select ou autre. téléchargez votre fichier SVG, cliquez sur "générer une police", incluez les fichiers de police et les CSS dans votre côté et utilisez-le et personnalisez-le comme n'importe quel autre texte. Je l'utilise toujours comme ça parce que ça rend le style beaucoup plus facile.

EDIT: Comme mentionné dans le article commenté par les icônes @ CodeMouse92 gâchent les lecteurs d'écran (et sont peut-être mauvais pour le référencement). Donc, tenez-vous plutôt aux SVG.

7
Felix Hagspiel

Seulement SVG avec information de chemin . vous ne pouvez pas faire cela à l'image .. car le chemin que vous pouvez changer de strock et de remplissage d'informations et vous avez terminé comme Illustrator

donc: via CSS, vous pouvez écraser le chemin fill valeur

path { fill: orange; }

mais si vous voulez un moyen plus flexible que vous voulez le changer avec un texte lorsque vous avez un effet de survol en cours .. 

path { fill: currentcolor; }


body {
  background: #ddd;
  text-align: center;
  padding-top: 2em;
}

.parent {
  width: 320px;
  height: 50px;
  display: block;
  transition: all 0.3s;
  cursor: pointer;
  padding: 12px;
  box-sizing: border-box;
}

/***  desired colors for children  ***/
.parent{
  color: #000;
  background: #def;
}
.parent:hover{
  color: #fff;
  background: #85c1fc;
}

.parent span{
  font-size: 18px;
  margin-right: 8px;
  font-weight: bold;
  font-family: 'Helvetica';
  line-height: 26px;
  vertical-align: top;
}
.parent svg{
  max-height: 26px;
  width: auto;
  display: inline;
}

/****  magic trick  *****/
.parent svg path{
  fill: currentcolor;
}
<div class='parent'>
  <span>TEXT WITH SVG</span>
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128" viewBox="0 0 32 32">
<path d="M30.148 5.588c-2.934-3.42-7.288-5.588-12.148-5.588-8.837 0-16 7.163-16 16s7.163 16 16 16c4.86 0 9.213-2.167 12.148-5.588l-10.148-10.412 10.148-10.412zM22 3.769c1.232 0 2.231 0.999 2.231 2.231s-0.999 2.231-2.231 2.231-2.231-0.999-2.231-2.231c0-1.232 0.999-2.231 2.231-2.231z"></path>
</svg>
</div>

5
Biskrem Muhammad

Vous pouvez changer la couleur SVG avec css si vous utilisez quelques astuces ..__ J'ai écrit un petit script pour ça. 

  • parcourir une liste d'éléments qui ont une image svg
  • charge le fichier svg au format xml
  • chercher seulement une partie svg
  • changer la couleur du chemin
  • remplace src par le svg modifié comme image inline
$('img.svg-changeable').each(function () {
  var $e = $(this);
  var imgURL = $e.prop('src');

  $.get(imgURL, function (data) {
    // Get the SVG tag, ignore the rest
    var $svg = $(data).find('svg');

    // change the color
    $svg.find('path').attr('fill', '#000');

    $e.prop('src', "data:image/svg+xml;base64," + window.btoa($svg.prop('outerHTML')));
  });

});

le code ci-dessus peut ne pas fonctionner correctement, j'ai implémenté cela pour les éléments avec une image d'arrière-plan svg qui fonctionne presque de la même manière que ceci . Mais de toute façon, vous devez modifier ce script pour l'adapter à votre cas. espérons que cela a aidé.

4
cydoc

Pour changer simplement la couleur du svg:

Allez dans le fichier svg et sous styles, mentionnez la couleur de remplissage.

<style>.cls-1{fill:#FFFFFF;}</style>
3
Sethu Sathyan

SVG masque sur un élément de boîte avec une couleur d'arrière-plan entraînera:

.icon{
  --size : 70px;
  display: inline-block;
  width: var(--size);
  height: var(--size);
  -webkit-mask-size: cover;
  mask-size: cover;
  transition: .12s;
}

.icon-bike{
  background: black;
  -webkit-mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/icon-bike-black.svg);
  mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/icon-bike-black.svg);
}

.icon-bike:hover{
  background: green;
}
<i class="icon icon-bike" style="--size:150px"></i>
1
vsync

Par exemple:

<svg viewBox="" width="" height="">
<path id="struct1" fill="#xxxxxx" d="M203.3,71.6c-.........."></path>
</svg>

Utilisez jQuery:

$ ("# struct1"). css ("fill", "");

0
Grv97

Ciblez le chemin dans le svg:

<svg>
   <path>....
</svg>

Vous pouvez faire en ligne, comme:

<path fill="#ccc">

Ou

svg{
   path{
        fill: #ccc
0
Michael Philips