1

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

4

1 回答 1

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>
于 2013-10-26T01:13:29.133 回答