SVG滤波器模拟混合模式(SVG filter simulate blending mode)

我试图模拟mix-blend-mode:exclusion混合模式，只有SVG过滤器。文档说排除是从打火机较深的颜色，换句话说，更大的色成分值减去较小的色成分值的减法。有什么办法来模拟使用SVG过滤器这样的逻辑？原始图像是：

过滤后的图像将是：

颜色排除是#3a0339

我也带有些方便您的代码片段：

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

所述过滤效果模块更新的定义<feBlend> 除了值mode在SVG 1.1规范定义的，你现在可以使用所有由定义的额外模式的合成和混合规范。

这包括“排斥”，所以只要你是在浏览器环境中，你其实可以做你想做很容易的。在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>