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（也称为非Chrome）中受支持
使用CSS background-blend和mix-blend（仅限最近的浏览器）示例：

＆＃13;

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

＆＃13;

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

＆＃13;

您的最后一个选项是使用反转SVG过滤器将原始内容分层到内容的反转版本下面，然后使用反转版本上的蒙版裁剪为所需的形状。

＆＃13;

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

＆＃13;

如何用SVG中背景的倒数填充形状？

1 个答案: