如何在 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 背景过滤器：invert(100%) - 仅在最近的 webkit 中支持（也不是 Chrome）
• 使用 CSS background-blend 和 mix-blend（仅限最近的浏览器）示例：

.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>