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

を背景画像は、ほぼすべてのブラウザでサポートされていない入力され、正式に次のフィルタ仕様で推奨されていません。

あなたの選択肢は以下のとおりです。

• は、背景画像に何ののコピーを取り、あなたは非標準のCSSの背景・フィルタを使用し
• それを使用することができるようにfeImageを使用してフィルタにインポート：反転を（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>