css 属性掩码不适用于 svg答案

【问题标题】：css property mask is not working properly for svgcss 属性掩码不适用于 svg
【发布时间】：2020-10-06 03:27:52
【问题描述】：

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

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

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

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

【问题讨论】：

【解决方案1】：

对于一个巨大的在线 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

【讨论】：

【解决方案2】：

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

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

【讨论】：