使用css反转svg图像？

【问题标题】：Invert svg image using css?使用css反转svg图像？
【发布时间】：2017-02-07 05:42:00
【问题描述】：

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

我尝试过使用

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

但它不起作用。

【问题讨论】：

【解决方案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);
}

&lt;img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg" /&gt;

您可以按照docs 所说的将金额设置为百分比或数字

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

【讨论】：