使用SVG使用混合滤镜(更具体地说)

我有一个参考图像,我想用SVG实现的效果.

在Photoshop中,可以通过使用100%不透明度并将混合模式设置为"倍增"来实现效果

颜色的十六进制值为:

红色:#EA312F,蓝色:#3A5BA6和重叠区域:#35111F

我已经尝试了许多使用SVG滤镜来实现类似效果的方法,但我很难理解混合模式如何计算值.

原始Photoshop位图

SVG仅使用形状没有过滤器

SVG在垂直条上使用乘法滤波器

SVG在垂直条上使用乘法滤镜和不透明度

您可以在此JSBin http://jsbin.com/iPePuvoD/1/edit中查看每个SVG代码

我真的很难理解匹配垂直条蓝色和重叠区域颜色的最佳方法.

这些形状的每一个我也想利用动画库,如http://snapsvg.io/,所以我希望能单纯依靠过滤器,而不是裁剪或其它操作,以达到预期的效果-但我愿意接受建议.

实际上,最终尝试的SVG(4.)是这样的:

非常感谢有关这方面的一些建议,我已经在SVG上找到了一些很好的资源,但是这个领域似乎仍然很难获得好的信息.

谢谢!