html - css 属性掩码不适用于 svg

Question

Css 属性clip-path工作正常，但在此示例mask中无法正常工作。-webkit-mask

请帮我解决这个问题，因为我的项目完全依赖于使用 svg 文件屏蔽图像。

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

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

Answer 1

您需要减少 SVG 代码并删除所有g元素以仅保留如下路径：

https://jsfiddle.net/hro4wbzf/

然后你在里面使用它mask，如果需要，你可以使用 CSS 进行旋转：

https://jsfiddle.net/7kyazn30/

相关：如何调整 SVG 的 ClipPath 区域？

Answer 2

对于一个巨大的在线 svg，我建议你使用标签 ... ，而不是像你一样将它完全传递到你的 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.me/css-svg-masks/#testM7