img src SVG changer la couleur de remplissage

si votre but est juste de changer la couleur du logo, et que vous n'avez pas nécessairement besoin d'utiliser CSS, alors n'utilisez pas javascript ou jquery comme suggéré par certaines réponses précédentes.

pour répondre précisément à la question initiale, juste:

1. ouvrez votre logo.svg dans un éditeur de texte.

2. chercher fill: #fff et le remplacer par fill: #000

par exemple, votre logo.svg pourrait ressembler à ceci lorsqu'il est ouvert dans un éditeur de texte:

<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
  <path d="M0 0h24v24H0z" fill="none"/>
  <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" fill="#fff"/>
</svg>

... il suffit de changer le remplir et enregistrer.

vous pouvez définir votre svg comme un masque. De cette façon, définir une couleur de fond agirait comme votre couleur de remplissage.

HTML

<div class="logo"></div>

CSS

.logo {
    background-color: red;
    -webkit-mask: url(logo.svg) no-repeat center;
    mask: url(logo.svg) no-repeat center;
}

JSFiddle: https://jsfiddle.net/KuhlTime/2j8exgcb /

veuillez noter que cette méthode ne fonctionne pas pour le navigateur Edge. Vous pouvez vérifier qu'en allant sur ce site: https://caniuse.com/#search=mask

la réponse de @Praveen est solide.

Je n'ai pas pu l'obtenir pour répondre dans mon travail, donc j'ai fait un jQuery fonction de vol stationnaire pour elle.

CSS

.svg path {
   transition:0.3s all !important;
}

JS / JQuery

// code from above wrapped into a function
replaceSVG();

// hover function
// hover over an element, and find the SVG that you want to change
$('.element').hover(function() {
    var el = $(this);
    var svg = el.find('svg path');
    svg.attr('fill', '#CCC');
}, function() {
    var el = $(this);
    var svg = el.find('svg path');
    svg.attr('fill', '#3A3A3A');
});

pourquoi ne pas créer un webfont avec votre image svg ou vos images, importer le webfont dans le css et puis juste changer la couleur du glyphe en utilisant l'attribut couleur css? Pas besoin de javascript

cette réponse est basée sur la réponse https://stackoverflow.com/a/24933495/3890888 mais avec une version JavaScript du script utilisé.

vous devez faire le SVG pour être un SVG en ligne . Vous pouvez utiliser ce script, en ajoutant une classe svg à l'image:

/*
 * Replace all SVG images with inline SVG
 */
document.querySelectorAll('img.svg').forEach(function(img){
    var imgID = img.id;
    var imgClass = img.className;
    var imgURL = img.src;

    fetch(imgURL).then(function(response) {
        return response.text();
    }).then(function(text){

        var parser = new DOMParser();
        var xmlDoc = parser.parseFromString(text, "text/xml");

        // Get the SVG tag, ignore the rest
        var svg = xmlDoc.getElementsByTagName('svg')[0];

        // Add replaced image's ID to the new SVG
        if(typeof imgID !== 'undefined') {
            svg.setAttribute('id', imgID);
        }
        // Add replaced image's classes to the new SVG
        if(typeof imgClass !== 'undefined') {
            svg.setAttribute('class', imgClass+' replaced-svg');
        }

        // Remove any invalid XML tags as per http://validator.w3.org
        svg.removeAttribute('xmlns:a');

        // Check if the viewport is set, if the viewport is not set the SVG wont't scale.
        if(!svg.getAttribute('viewBox') && svg.getAttribute('height') && svg.getAttribute('width')) {
            svg.setAttribute('viewBox', '0 0 ' + svg.getAttribute('height') + ' ' + svg.getAttribute('width'))
        }

        // Replace image with new SVG
        img.parentNode.replaceChild(svg, img);

    });

});

et puis, maintenant si vous le faites:

.logo-img path {
  fill: #000;
}

ou peut être:

.logo-img path {
  background-color: #000;
}

JSFiddle: http://jsfiddle.net/erxu0dzz/1/

pour développer la réponse @gringo, la méthode Javascript décrite dans d'autres réponses fonctionne, mais exige de l'utilisateur de télécharger des fichiers d'image inutiles, et IMO, il gonfle votre code.

je pense qu'une meilleure approche serait de migrer tous les graphiques vectoriels en 1 couleur vers un fichier webfont. J'ai utilisé Fort Awesome dans le passé, et il fonctionne très bien pour combiner vos icônes/images personnalisées en format SVG, avec n'importe quelle icônes de tiers que vous pouvez utiliser (Font Génial, Bootstrap icônes, etc. en une seule webfont fichier, l'utilisateur doit télécharger. Vous pouvez également le personnaliser, de sorte que vous n'incluez que les icônes de tiers que vous utilisez. Cela réduit le nombre de requêtes que la page doit faire, et vous êtes le poids global de la page, surtout si vous êtes déjà en incluant des bibliothèques d'icônes de tiers.

si vous préférez une option plus orientée dev, vous pouvez Google" npm svg webfont" , et utiliser l'un des modules de noeud qui est plus approprié pour votre environnement.

une fois, vous avez fait l'une de ces deux options, alors vous pourriez facilement changer la couleur via CSS, et très probablement, vous avez accéléré votre site dans le processus.

Essayez pur CSS:

.logo-img {
  // to black
  filter: invert(1);
  // or to blue
  // filter: invert(1) sepia(1) saturate(5) hue-rotate(175deg);
}

plus d'informations dans cet article https://blog.union.io/code/2017/08/10/img-svg-fill /

2018: Si vous voulez une couleur dynamique, ne voulez pas utiliser javascript et ne voulez pas de SVG en ligne, utilisez une variable CSS. Fonctionne en Chrome, Firefox et Safari. Modifier: et le bord

<svg>
    <use xlink:href="logo.svg" style="--color_fill: #000;"></use>
</svg>

dans votre SVG, remplacer toutes les instances de style="fill: #000" par style="fill: var(--color_fill)" .

le problème principal dans votre cas est que vous importez le svg à partir d'une étiquette <img> qui masquera la structure SVG.

vous devez utiliser l'étiquette <svg> en conjonction avec le <use> pour obtenir l'effet désiré. Pour que cela fonctionne, vous devez donner un id au chemin que vous voulez utiliser dans le fichier SVG <path id='myName'...> pour pouvoir ensuite les récupérer à partir de la balise <use xlink:href="#myName"/> . Essayez le snipped ci-dessous.

.icon {
  display: inline-block;
  width: 2em;
  height: 2em;
  transition: .5s;
  fill: currentColor;
  stroke-width: 5;
  }
  .icon:hover {
    fill: rgba(255,255,255,0);
    stroke: black;
    stroke-width: 2;
    }

.red {
  color: red;
  }

.blue {
  color: blue;
  }

<svg width="0" height="0">
  <defs>
    <path id="home" d="M100 59.375l-18.75-18.75v-28.125h-12.5v15.625l-18.75-18.75-50 50v3.125h12.5v31.25h31.25v-18.75h12.5v18.75h31.25v-31.25h12.5z"/>
</svg>

  
  <span class="icon red">
          <svg viewbox="0 0 100 100">
            <use xlink:href="#home"/>
          </svg>
        </span>
  
    <span class="icon blue">
          <svg viewbox="0 0 100 100">
            <use xlink:href="#home"/>
          </svg>
        </span>

notez que vous pouvez mettre n'importe quelle URL avant le fragment # si vous voulez charger le SVG à partir d'une source externe (et ne pas l'intégrer dans votre HTML). De plus, habituellement, vous ne spécifiez pas le remplissage dans le CSS. Il est préférable d'utiliser fill:"currentColor" dans la SVG elle-même. La valeur de couleur CSS de l'élément correspondant sera alors utilisée en place.

puisque SVG est essentiellement du code, vous avez juste besoin de contenu. J'ai utilisé PHP pour obtenir du contenu, mais vous pouvez utiliser tout ce que vous voulez.

<?php
$content    = file_get_contents($pathToSVG);
?>

alors, j'ai imprimé le contenu " tel quel "dans un conteneur div

<div class="fill-class"><?php echo $content;?></div>

Pour enfin définir la règle de conteneur SVG childs sur CSS

.fill-class > svg { 
    fill: orange;
}

j'ai obtenu ce résultat avec une icône de matériel SVG:

Mozilla Firefox 59.0.2 (64-bit) Linux

Google Chrome66.0.3359.181 (Build oficial) (64 bits) Linux

Opera 53.0.2907.37 Linux

vous devez d'abord injecter le SVG dans le DOM HTML.

il y a une bibliothèque libre appelée SVGInject qui fait cela pour vous. Il utilise l'attribut onload pour déclencher l'injection.

voici un exemple minimal d'utilisation de SVGInject:

<html>
  <head>
    <script src="svg-inject.min.js"></script>
  </head>
  <body>
    <img src="image.svg" onload="SVGInject(this)" />
  </body>
</html>

après le chargement de l'image ,le onload="SVGInject(this) déclenche l'injection et l'élément <img> est remplacé par le contenu du fichier SVG fourni dans l'attribut src .

Il résout plusieurs problèmes avec les SVG d'injection:

1. les SVG peuvent être cachés jusqu'à la fin de l'injection. Ceci est important si un style est déjà appliqué pendant le temps de charge, ce qui causerait sinon un bref "flash de contenu non-rayé".

2. les éléments <img> s'injectent automatiquement. Si vous ajoutez SVGs dynamiquement, vous n'avez pas à vous soucier d'appeler l'injection à nouveau la fonction.

3. une chaîne aléatoire est ajoutée à chaque ID dans la SVG pour éviter d'avoir le même ID plusieurs fois dans le document si une SVG est injectée plus d'une fois.

SVGInject est Javascript et fonctionne avec tous les navigateurs qui supportent SVG.

clause de non-responsabilité: je suis le co-auteur de SVGInject

si vous avez accès à JQuery, puis étendre à la réponse de Praveen on peut programmatically changer la couleur de différents éléments imbriqués à L'intérieur de SVG par:

$('svg').find('path, text').css('fill', '#ffffff');

dans find, Vous pouvez mentionner différents éléments qui doivent être changés en couleur.