css属性掩码对svg不能正常使用

Question

Css属性 clip-path 行得通 mask 或 -webkit-mask 在此情况下无法正常工作 例子.

请帮助我解决这个问题，因为我的项目是完全依赖于遮挡图像与svg文件。

在 clip-path我不能在响应式视图中调整图像大小，所以我只有一种方法来解决这个问题。

所以请检查示例代码，可能是我犯了任何错误。

Answer 1

你需要减少你的SVG代码，并删除所有的代码。g 元素，只保留这样的路径。

https:/jsfiddle.nethro4wbzf

然后你在 mask 并在需要时用CSS做旋转。

https:/jsfiddle.net7kyazn30

相关内容 如何调整SVG的ClipPath区域大小？

Answer 2

对于一个巨大的在线SVG，我建议你使用标签......，而不是像你一样完全在你的css的url()属性中传递。 ，而不是像你这样完全在css的url()属性中传递。错误的风险更大。所以我的建议是这样的。

<mask  id="maskMaskSource" class="MaskType" maskContentUnits="objectBoundingBox">
<svg> .... </svg>
</mask>

并在你的css中。

#maskMaskSource {
mask-image: url(#maskMaskSource);
}
.MaskType {
mask-type: alpha;
}

你可以在这里得到更详细的解释 https:/lab.iamvdo.mecss-svg-masks#testM7。