提问者:小点点

svg的css属性掩码工作不正常


Css属性clip-path工作正常,但mask-webkit-mask在本例中工作不正常。

请帮我解决这个问题,因为我的项目完全依赖于用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