Export to SVG with blend mode or "Apply" it



Export to SVG with blend mode or "Apply" it


Question

I have an image with a gradient background and a transparent gray shadow on top of it set to multiply. When I export to SVG, it loses the blend mode and appears gray.

enter image description hereenter image description here

How can I have Illustrator either export as SVG with the correct blend mode, or "apply" the blend mode to the shadow so it becomes an opaque gradient with the same color as the result of the multiply?

Edit: Flatten Transparency is very close to what I want, but it cuts the shape out of the object below it. Is there any way to avoid this?

2016/06/13
1
3
6/13/2016 9:25:00 PM

You can use the following CSS code on that path:

.st1 {
    mix-blend-mode: multiply;
}

But the browser compatibility is pretty poor.

See working example: https://jsfiddle.net/gaa5mbvm/

2016/06/13
2
6/13/2016 8:21:00 PM