css - -webkit-mask-image - 使用 SVG 作为掩码

Question

我正在尝试使用 SVG 为 HTML 元素创建掩码。出于浏览器兼容性原因(我可能是错的)，我将 SVG 图像应用为数据 uri:

#shape { 
   width:200px;
   height:200px;
   background:blue;
   -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><rect fill='white' x='90' y='50' width='70' height='50'/><rect fill='white' x='150' y='150' width='70' height='50'/></svg>");
   -webkit-mask-repeat:no-repeat;
} 

SVG 本身看起来像:

<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>
    <rect fill='white' x='90' y='50' width='70' height='50'/>
    <rect fill='white' x='150' y='150' width='70' height='50'/>
</svg>

Jsfiddle 在这里:http://jsfiddle.net/whL48/

您可以看到原来的大蓝色矩形已被遮盖以显示两个较小的矩形。

我想要实现的是与此相反 - 大的蓝色矩形是可见的，其中有两个较小的矩形被切掉，但我的 SVG 印章不是很好。

Answer 1

反转 SVG 的颜色。您还需要添加一个白色矩形来填充 SVG 的背景。

<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>
    <rect fill='white' width="100%" height="100%"/>
    <rect fill='black' x='90' y='50' width='70' height='50'/>
    <rect fill='black' x='150' y='150' width='70' height='50'/>
</svg>