[Bug]: Issue with rendering elements with style `mix-blend-mode`

[Jozo132]

Would you like to work on a fix?

• [ ] Check this if you would like to implement a PR, we are more than happy to help you go through the process.

Current and expected behavior

I have issues rendering a selective inversion mask using the CSS style property mix-blend-mode: difference. From what it looks like it just ignores the style and draws a regular rect when in SVG it does invert the lower underlying area. I have set the SVG window with style isolation: isolate for the mix-blend-mode to have an effect but it doesn't render correctly. The expected behavior can be seen with the SVG output window on the right.

<svg class="custom-svg-window" width="1024" height="643" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background-color: #FFF; isolation: isolate; position: relative;">
  <g transform="scale(1) translate(0, 0)">
    <text x="0" y="60" dy="0.75em" font-size="30" font-style="normal" font-weight="normal" fill="#000" >This is a test message</text>
    <rect type="rect" x="25" y="50" width="50" height="140" fill="#FFF"  style="mix-blend-mode: difference;"/>
    <text x="0" y="90" dy="0.75em" font-size="30" font-style="normal" font-weight="normal" fill="#000" >This is a test message</text>
    <rect type="rect" x="100" y="50" width="50" height="140" fill="#FFF"  style="mix-blend-mode: difference;"/>
    <text x="0" y="120" dy="0.75em" font-size="30" font-style="normal" font-weight="normal" fill="#000" >This is a test message</text>
    <rect type="rect" x="175" y="50" width="50" height="140" fill="#FFF"  style="mix-blend-mode: difference;"/>
    <text x="0" y="150" dy="0.75em" font-size="30" font-style="normal" font-weight="normal" fill="#000" >This is a test message</text>
  </g>
</svg>

Reproduction

https://canvg.js.org/demo/

Canvg version

V2 and V3

Possible solution

No response