web-dev-qa-db-fra.com

Inverser l'image SVG en utilisant CSS?

J'essaie d'inverser un fichier image avec .svg extension utilisant css. Je sais .png et .jpg les fichiers peuvent être inversés à l'aide des propriétés csswebkit. Je suis nouveau sur les images svg. Est-il possible d'inverser .svg images utilisant css?

J'ai essayé d'utiliser

-webkit-filter:invert(1);
        filter:invert(1);

mais cela n'a pas fonctionné.

cssimagesvgcss-filters
14
Dream Hunter - hashADH

Style juste l'élément SVG directement

svg {
  -webkit-filter: invert(100%); /* safari 6.0 - 9.0 */
          filter: invert(100%);
}

Depuis IE9 et plus, vous pouvez utilisez SVG dans <img src="" /> élément.

img { /* svg on an img tag */
  -webkit-filter: invert(.75); /* safari 6.0 - 9.0 */
          filter: invert(.75);
}
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg" />

Vous pouvez définir le montant en pourcentage ou en nombre comme ceci docs dit

Le montant de la conversion, spécifié comme <number> ou un <percentage>. Une valeur de 100% est complètement inversé, tandis qu'une valeur de 0% laisse l'entrée inchangée. Valeurs entre 0% et 100% sont des multiplicateurs linéaires de l'effet. La valeur de lacune pour l'interpolation est 0.

35
Engkus Kusnadi