使用 css 反转 SVG 后面的 mask 属性

如何解决使用 css 反转 SVG 后面的 mask 属性

我有一个 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>