CSS 使用css反转svg图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39761120/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Invert svg image using css?
提问by Dream Hunter - hashADH
I'm trying to invert an image file with .svgextension using css. I know .pngand .jpgfiles can be inverted using csswebkitproperties. I am new on svgimages. Is it possible to invert .svgimages using css?
我正在尝试.svg使用css. 我知道.png和.jpg文件可以使用反转csswebkit性质。我是svg图像的新手。是否可以.svg使用反转图像css？
I tried using
我尝试使用
-webkit-filter:invert(1);
filter:invert(1);
but it did not work.
但它没有用。
回答by Engkus Kusnadi
Just style the SVG element directly
直接设置 SVG 元素的样式
svg {
-webkit-filter: invert(100%); /* safari 6.0 - 9.0 */
filter: invert(100%);
}
From IE9 and above you canuse SVG in <img src="" />element.
从 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" />You can set the amount as percentage or as number as this docssays
您可以将金额设置为百分比或数字，如this docs所说
The amount of the conversion, specified as a
<number>or a<percentage>. A value of100%is completely inverted, while a value of0%leaves the input unchanged. Values between0%and100%are linear multipliers on the effect. The lacuna value for interpolation is0.
转换量，指定为 a
<number>或 a<percentage>。的值100%完全反转，而 的值则0%保持输入不变。0%和之间的值100%是效果的线性乘数。插值的缺失值为0。
