使用css反转svg图像？

Question

我正在尝试使用.svg扩展名反转图像文件css.我知道.png,.jpg文件可以使用css webkit属性反转.我是新的svg图像.是否可以.svg使用css？反转图像？

我试过用

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

但它不起作用.

Answer 1

只需直接设置SVG元素的样式即可

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

从IE9及以上版本,您可以在<img src="" />元素中使用SVG .

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" />

您可以设置量百分比或数字作为该文档称

转换金额,指定为a <number>或a <percentage>.值100%完全反转,而值 0%保持不变.0%和之间的值100%是效果的线性乘数.插值的空白值是0.