SVG滤镜模拟混合模式 [英] SVG filter simulate blending mode

问题描述

我试图模拟只有SVG过滤器的混合模式：排除混合模式。文档说，排除是从较亮的颜色较深的颜色减去，换句话说，较大的颜色成分值减去较小的颜色成分值。
有没有什么方法可以用SVG滤波器来模拟这个逻辑？
原始图像是：

I'm trying to simulate mix-blend-mode:exclusion blending mode with only SVG filters. The docs say exclusion is a substraction of darker color from lighter, in other words, greater color component value minus smaller color component value. Is there any way to simulate this logic using SVG filters? The original image is:

过滤的图像将是：

颜色排除是＃3a0339

我为您提供一些代码片段：

The color to exclude is #3a0339

推荐答案

滤镜效果模块更新了< feBlend> 。除了SVG 1.1规范中定义的 mode 的值之外，现在可以使用合成和混合规范。



包括排除，如只要你在浏览器环境中，你可以很容易地做你想做的事情。以下作品在Firefox和Chrome中运行。我没有检查任何其他浏览器。

That includes "exclusion", so as long as you are in a browser environment, you can actually do what you want quite easily. The following works in Firefox and Chrome. I haven't checked any other browsers.

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>

这篇关于SVG滤镜模拟混合模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！