使用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及以上版本can在<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" />

您可以将此金额设置为百分比或数字docs说

  

转化金额，指定为<number>或a   <percentage>。 100%的值完全反转，而值为。{   0%保持输入不变。 0%和100%之间的值是线性的   关于效果的乘数。插值的空白值为0。