使用css反转svg图像？

Posted 2023-03-06

【中文标题】使用css反转svg图像？

【英文标题】：Invert svg image using css?

【发布时间】：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);

<img src="https://cdn.sstatic.net/Sites/***/company/img/logos/so/so-logo.svg" />

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

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