如何用SVG背景的倒數來填充一個形狀？

Question

如何創建一個形狀，例如一個矩形，它反轉（xor？）背後的所有顏色？

未成功我想：

<filter 
id="invert"> 
<feColorMatrix 
in="BackgroundImage" 
values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0 "/> 
<feComposite 
operator="in" 
in2="SourceGraphic"/> 
</filter> 
<svg> 
    <rect x="10" y="10" width="50" height="50" fill="blue"></rect> 
    <rect x="20" y="20" width="50" height="50" fill="blue" style="filter: url(#invert);"></rect> 
</svg> 

http://codepen.io/anon/pen/bqXPPZ

Answer 1

的BackgroundImage是幾乎所有的瀏覽器不支持的輸入，並在接下來的過濾器規格已正式棄用。

你的選擇是：

• 採取任何的副本背景圖像，並使用feImage所以你可以使用它
• 使用非標準的CSS背景下，過濾器將其導入到過濾器：反轉（100％） - 只是在最近的WebKit支持（又名不鍍鉻）
• 使用CSS背景融合和混合 - 混合（最新的瀏覽器只）例如：

.content { 
 
    background-image: url("http://stylecampaign.com/blog/blogimages/SVG/fox-1.svg"); 
 
    background-size: 600px; 
 
    position: absolute; 
 
    top: 40px; 
 
    left: 30px; 
 
    width: 700px; 
 
    height: 800px; 
 
} 
 

 
.inverter { 
 
    background: white; 
 
    position: absolute; 
 
    top: 200px; 
 
    left: 300px; 
 
    width: 300px; 
 
    height: 100px; 
 
    mix-blend-mode: exclusion; 
 
}

<div class="content"> 
 
    <div class="inverter"/> 
 
</div>

• 你的最後一個選項是層的使用反轉SVG過濾器的內容倒版本低於原來的內容，然後用對反向版本口罩裁剪成所需的形狀。

<svg width="800px" height="600px"> 
 
    <defs> 
 
    <filter id="invert"> 
 
     <feComponentTransfer> 
 
     <feFuncR type="table" tableValues="1 0"/> 
 
     <feFuncG type="table" tableValues="1 0"/> 
 
     <feFuncB type="table" tableValues="1 0"/> 
 
     </feComponentTransfer> 
 
    </filter> 
 
    
 
    <mask id="mask-me"> 
 
     <circle cx="215" cy="180" r="100" fill="white" /> 
 
    </mask> 
 
    </defs> 
 
    
 
    <image width="400" height="400" x="20" y="20" xlink:href="http://stylecampaign.com/blog/blogimages/SVG/fox-1.svg" /> 
 
    <image width="400" height="400" x="20" y="20" filter="url(#invert)" xlink:href="http://stylecampaign.com/blog/blogimages/SVG/fox-1.svg" mask="url(#mask-me)"/> 
 

 
</svg>