SVG滤镜模拟混合模式答案

【问题标题】：SVG filter simulate blending modeSVG滤镜模拟混合模式
【发布时间】：2017-10-14 23:11:35
【问题描述】：

我正在尝试仅使用 SVG 滤镜模拟 mix-blend-mode:exclusion 混合模式。文档说排除是从较浅的颜色中减去较深的颜色，换句话说，较大的颜色分量值减去较小的颜色分量值。有没有办法使用 SVG 过滤器来模拟这个逻辑？原图为：

过滤后的图像将是：

要排除的颜色是#3a0339

为了您的方便，我带来了一些代码 sn-ps：

svg {
  width: 0;
  height: 0;
}
.myFilter {
  filter: url(#myFilter);
}

<svg>
<defs>
<filter id="myFilter" x="0" y="0" width="100%" height="100%">
  <feFlood result="fill" flood-color="#3a0339" flood-opacity="1">
  </feFlood>
<feComposite operator="arithmetic" in="SourceGraphic" in2="fill" k1="0" k2="0.5" k3="0.5" k4="0"/>
 </filter>
</defs>
</svg>
<img class="myFilter" src="https://i.stack.imgur.com/ux2FT.png">

【问题讨论】：

我认为这是不可能的。您可以通过组合两个 feBlends（屏幕和乘法）来接近，但最终的合成需要从另一个中减去一个。而且我认为没有办法在不将 Alpha 通道清零的情况下减去两种颜色。
@PaulLeBeau 所以所有计算实际上都涉及 alpha 通道，与其他通道的处理方式相同？
要减去它们，您需要使用feComposite，但这也会减去 alpha，因此它们会抵消（即 1-1=0）。给你留下一个看不见的结果。
@PaulLeBeau 但是有办法提取 Alpha 通道吗？使用“feFuncA”或“SourceAlpha”。如果我可以在提取后以某种方式清除 alpha，然后再将其添加回来？
那行不通。过滤器基元结果是预乘的。因此，如果将 alpha 置零，颜色分量也会置零。反正没关系，我已经找到解决办法了，看我的回答。

标签： css svg filter svg-filters

【解决方案1】：

Filter Effects module 更新了<feBlend> 的定义。除了 SVG 1.1 规范中定义的 mode 的值之外，您现在还可以使用 Compositing and Blending specification 定义的所有额外模式。

这包括“排除”，所以只要你在浏览器环境中，你实际上可以很容易地做你想做的事。以下适用于 Firefox 和 Chrome。我没有检查任何其他浏览器。

svg {
  width: 0;
  height: 0;
}
.myFilter {
  filter: url(#myFilter);
}
.myFilter2 {
  mix-blend-mode: exclusion;
}
.mix-bg {
  background-color: #3a0339;
  display: inline-block;
}
.mix-bg IMG {
  display: block;
}

<svg>
  <defs>
    <filter id="myFilter" x="0" y="0" width="100%" height="100%"
            color-interpolation-filters="sRGB">
      <feFlood flood-color="#3a0339" result="flood"/>
      <feBlend mode="exclusion" in="flood" in2="SourceGraphic"/>
    </filter>
  </defs>
</svg>

<img class="myFilter" src="https://i.stack.imgur.com/ux2FT.png">

<div class="mix-bg">
  <img class="myFilter2" src="https://i.stack.imgur.com/ux2FT.png">
</div>

【讨论】：

感谢@AmeliaBR 提醒我这一变化。