Css属性clip-path
工作正常,但mask
或-webkit-mask
在本例中工作不正常。
请帮我解决这个问题,因为我的项目完全依赖于用svg文件掩盖图像。
在Clip-Path
中,我无法在响应视图中调整图像的大小,因此我只有一种方法来解决这个问题。
所以请检查示例代码,可能是我犯了什么错误。
对于一个庞大的在线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