如何在 SVG 中用其背景的反面填充形状？

Question

如何创建形状，例如一个矩形，反转（异或？）它后面的所有颜色？

我试了没成功:

<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 中受支持（也不是 Chrome）
使用 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>

如何在 SVG 中用其背景的反面填充形状？

How to fill a shape with the inverse of its background in SVG?

svg

svg-filters