SVG filter simulate blending mode

Question

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:

The filtered image would be:

The color to exclude is #3a0339

I'm bringing some code snippets for your convenience:

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

Answer 1

The Filter Effects module updated the definition of <feBlend>. In addition to the values of mode defined in the SVG 1.1 spec, you can now use all of the extra modes defined by the Compositing and Blending specification.

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>