CSS属性掩码不适用于SVG [英] css property mask is not working properly for svg
问题描述
Css属性clip-path
可以正常工作,但mask
或-webkit-mask
在此
Css property clip-path
is work fine but mask
or -webkit-mask
is not working properly in this example.
请帮助我解决此问题,因为我的项目完全依赖于使用svg文件屏蔽图像.
Please help me to solve this because my project is totally depended on masking image with svg file.
在clip-path
中,我无法在响应视图中调整图像的大小,因此我只有一种方法可以解决此问题.
In clip-path
, i can't resize image in responsive views so i have only one way to solve this problem.
所以请检查示例代码,可能是我犯了任何错误.
So please check example code , may be i have made any mistake.
推荐答案
您需要减少SVG代码并删除所有g
元素以仅保留如下路径:
You need to reduce your SVG code and remove all the g
element to keep only the path like this:
https://jsfiddle.net/hro4wbzf/
然后在mask
内部使用它,并在需要时使用CSS进行轮换:
Then you use this inside the mask
and you do the rotation with CSS if needed:
https://jsfiddle.net/7kyazn30/
这篇关于CSS属性掩码不适用于SVG的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!