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/

相关:如何调整SVG的ClipPath区域的大小?

这篇关于CSS属性掩码不适用于SVG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！