SVG filter with feImage and feBlend, multiply blend mode not working as expected

2
votes

I am trying to create an SVG where black or white squares are overlayed on an image using various blend modes. I'm using a filter with an feImage primitive for the picture, making it partially transparent with feColorMatrix, and blending it with the square with feBlend. The normal blend mode works as I would expect it to, but multiply does not. Here's what I'm getting:

enter image description here

Here's a jsfiddle with the svg code

For multiplying with white (bottom-middle square), I expected it not to lighten the image at all, regardless of opacity, since multiplying with white is basically like multiplying by 1. For black (middle-top square), I expect it to darken the image according to its transparency. These are the things that happen when I play around in GIMP.

The SVG spec has the formulae for various blend modes here, if you're wondering (I can't post more than 2 links with my current reputation, sorry). www.w3.org/TR/SVG/filters.html#feBlendElement

What I think the problem is:

In my filter, I'm actually applying opacity to the feImage, not the SourceGraphic, simply because I couldn't figure out how to do it the other way around, despite much experimentation. Ideally it would be the squares that were partially transparent, and were then overlayed on the image. Setting in="SourceGraphic" for the feColorMatrix doesn't work right, nor does setting the opacity attribute on the rects themselves (they seem to blend with the default white svg background before blending with the image). I'm sure there's some simple solution, but I just can't find it.

Please tell me if anything's unclear. Any assistance is appreciated :)

2
svgalphablendingblendingsvg-filters

2 Answers

1
votes

For the love of god, add explicit ins and results to your filters. Otherwise it's like trying to push spaghetti. This is what you're looking to do:

    <filter color-interpolation-filters="sRGB" x="-1.0" y="-1.0" width="3.0"
        xmlns:xlink="http://www.w3.org/1999/xlink" xlink:type="simple"
        xlink:actuate="onLoad" height="3.0" 
        xlink:show="other" id="blend-square-multiply">
        <feImage result="raw photo" x="0" y="0" width="522" height="530"
                 xlink:href="http://wallpapersus.com/wallpapers/2012/11/Pirates-Of-The-Caribbean-On-Stranger-Tides-05-2048x2048.jpg"/>
        <feComposite result="photo clip" in="raw photo" in2="SourceGraphic" operator="in"/>
        <feColorMatrix in="SourceGraphic" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 .5 0" type="matrix" result="color-trans"/>
        <feBlend mode="multiply" in="photo clip" in2="color-trans"/>
    </filter>

Fiddle with some edits to make it clear what I was editing: http://jsfiddle.net/Wu96x/

0
votes

Isn't it just appearing lightened because you are placing a partially transparent image over a white background? As you say, the multiply-by-white will be having no effect.