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>