如何用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>