logo标签列表

使用CSS反转SVG图像？

cssimagesvgcss-filters
51

我正在尝试使用css反转一个后缀名为.svg的图像文件。我知道可以使用css webkit属性反转.png和.jpg文件。我对svg图像很陌生。是否可以使用css反转.svg图像？

我尝试了使用

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

但它没有起作用。

1个回答
96

直接为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" />

根据文档，您可以将转换程度设置为百分比或数字。

转换程度可用<number>或<percentage>指定。值100%完全反转，而值0%则保持输入不变。介于0%和100%之间的值是效果的线性乘数。插值的空缺值为0。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接