-webkit-mask-image - 使用 SVG 作为掩码答案

【问题标题】：-webkit-mask-image - using SVG as mask-webkit-mask-image - 使用 SVG 作为掩码
【发布时间】：2013-11-05 03:54:18
【问题描述】：

我正在尝试使用 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 印章不是很好。

【问题讨论】：

标签： css svg

【解决方案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>

【讨论】：