我有一个 SVG 并使用带有背景颜色的蒙版来显示 SVG,是否有任何属性可以用来反转蒙版?例如。通常,SVG 蒙版会隐藏 SVG 内容后面没有的任何内容,我怎样才能以相反的方式发生这种情况?
我本以为 mask-composite 将是在这里使用的属性,但浏览器(Chrome)无法识别它
mask-composite
是您正在寻找的形式,但您需要 chrome 的固定版本。
示例:
.box {
width: 100px;
height: 100px;
display:inline-block;
background: red;
}
.normal {
-webkit-mask: url(https://i.ibb.co/FzmCjLL/Jqtz.png) center/contain no-repeat;
}
.inverted {
-webkit-mask:
url(https://i.ibb.co/FzmCjLL/Jqtz.png) center/contain no-repeat,
linear-gradient(#fff 0 0); /* we need this extra layer for mask-composite */
-webkit-mask-composite:destination-out;
mask-composite:exclude;
}
body {
background:#f3f3f3;
}
<div class="box normal"></div>
<div class="box inverted"></div>