css 属性 svg 掩码无法正常工作

Question

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

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

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

所以请检查示例代码，可能是我弄错了。

Answer 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

Answer 2

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

然后在 mask 中使用它，如果需要的话，用 CSS 进行旋转：

css property mask is not working properly for svg