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>

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

1 个答案: