SVG Blend color with entire background - svg

Question

I'm sure this is really simple, but I'm making a SVG, where I have 4 <g> groups for each of CMYK colors and I'm having all 4 composited on top of each other.
I want to use a multiply color blending mode for each layer; each layer is its own solid color for each of CMYK, and I'd like the colors blended to produce the final image.
Using CSS I do:
<svg //put svg intro tag stuff here>
<rect width="100%" height="100%" fill="white"/>
<g fill="#0FF" style="mix-blend-mode: multiply">
<!--shape primitives that go on the cyan layer-->
</g>
<g fill="#F0F" style="mix-blend-mode: multiply">
<!--shape primitives that go on the magenta layer-->
</g>
<g fill="#FF0" style="mix-blend-mode: multiply">
<!--shape primitives that go on the yellow layer-->
</g>
<g fill="#000" style="mix-blend-mode: multiply">
<!--shape primitives that go on the key black layer-->
</g>
</svg>
This result is perfect... except it seems css in svg files isn't supported in one of the programs I'm using. So I'm trying to recreate this exact same effect using feBlend and feComposite.
<svg //put svg intro tag stuff here>
<defs>
<filter id="overcomp"><feComposite in="SourceGraphic" in2="BackgroundImage" operator="over" result="comp"/></filter>
<filter id="multiply"><feBlend mode="multiply" in2="BackgroundImage" in="SourceGraphic"/></filter>
</defs>
<rect width="100%" height="100%" fill="white"/>
<g fill="#0FF" filter="url(#overcomp)"> <!-- or #multiply)
<!--shape primitives that go on the cyan layer-->
</g>
<g fill="#F0F" filter="url(#overcomp)"> <!-- or #multiply)
<!--shape primitives that go on the magenta layer-->
</g>
<g fill="#FF0" filter="url(#overcomp)"> <!-- or #multiply)
<!--shape primitives that go on the yellow layer-->
</g>
<g fill="#000" filter="url(#overcomp)"> <!-- or #multiply)
<!--shape primitives that go on the key black layer-->
</g>
</svg>
The filter doesn't seem to do anything and the resultant image colors are not blended.
Each layer is 20k+ shapes so I would prefer not to duplicate the definitions if possible. How do I fix this?

Answer 1

BackgroundImage is not a supported input for any browser except IE10 (and has been deprecated for SVG2)
You have three options for pulling in groups like this into a SVG filter.
The first - which works everywhere except Firefox - is to pull them into a single filter using feImage and a fragment identifier.
<svg width="200px" height="200px">
<defs>
<g fill="#0FF" id="layer1">
<rect x="90" y="10" width="20" height="180"/>
</g>
<g fill="#F0F" id="layer2">
<circle cx="100" cy="100" r="80"/>
</g>
<g fill="#FF0" id="layer3">
<rect x="10" y="90" width="180" height="20"/>
</g>
<g fill="#000" id="layer4">
<path d="M 50 50 L150 50 L 150 150 L 50 150z"/>
</g>
<filter id="blendDefs">
<feImage xlink:href="#layer1" result="lay1"/>
<feImage xlink:href="#layer2" result="lay2"/>
<feImage xlink:href="#layer3" result="lay3"/>
<feImage xlink:href="#layer4" result="lay4"/>
<feBlend mode="multiply" in="lay1" in2="lay2" result="lay12"/>
<feBlend mode="multiply" in="lay3" in2="lay4" result="lay34"/>
<feBlend mode="multiply" in="lay12" in2="lay34" result="lay1234"/>
</filter>
</defs>
<rect filter="url(#blendDefs)" width="200" height="200" fill="none" stroke="none"/>
</svg>
The second - which is a hack, but bear with me, is to lay out each group in a column (or a row or a grid) within a single SourceImage, but use feOffsets to manually overlay them inside the filter. You have to do cleanup by manually drawing a rect over the overflow - hence the final rect below. (You used to be able to clip this by using filter dimensions but apparently Chrome now clips intermediate filter outputs to the filter window, so you can't use the feOffset method and filter clipping together. You also used to be able to use positioned feFloods to overpaint stuff inside a filter - but that's also broken in Chrome.)
<svg width="200px" height="800px">
<defs>
<filter id="blendOffset" >
<feOffset dy="0" result="lay1"/>
<feOffset dy="-200" result="lay2"/>
<feOffset dy="-200" result="lay3"/>
<feOffset dy="-200" result="lay4"/>
<feBlend mode="multiply" in="lay1" in2="lay2" result="lay12"/>
<feBlend mode="multiply" in="lay3" in2="lay4" result="lay34"/>
<feBlend mode="multiply" in="lay12" in2="lay34" result="lay1234"/>
</filter>
</defs>
<g id="OUTERCONTAINER" filter="url(#blendOffset)">
<rect x="0" y="0" height="800" width="200" fill="none" stroke="none"/>
<g fill="#0FF" >
<rect x="90" y="10" width="20" height="180" />
</g>
<g fill="#F0F" >
<circle cx="100" cy="100" r="80" transform="translate(0 200)"/>
</g>
<g fill="#FF0" >
<rect x="10" y="90" width="180" height="20" transform="translate(0 400)"/>
</g>
<g fill="#000">
<path d="M 50 50 L150 50 L 150 150 L 50 150z" transform="translate(0 600)"/>
</g>
</g>
<rect x="0" y="200" height="600" width="200" fill="#FFF" stroke="none"/>
</svg>
The third- which is unwieldly - is to inline each group as a separate image/svg URI within each feImage. This works cross browser - your code will look like this ...
<feImage xlink:href="data:svg+xml; etc...."/>
<feImage xlink:href="data:svg+xml; etc...."/>
<feBlend in="layer2" in2="layer2" ... etc.