使用css反转svg图像？

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

我试过用

-webkit-filter:invert(1);
        filter:invert(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所示

The amount of the conversion,specified as a <number> or a
<percentage>. A value of 100% is completely inverted,while a value of
0% leaves the input unchanged. Values between 0% and 100% are linear
multipliers on the effect. The lacuna value for interpolation is 0.

原文地址：https://www.jb51.cc/css/215646.html