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

Question

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

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

颜色的十六进制值为:

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

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

1. 原始Photoshop位图
2. SVG仅使用形状没有过滤器
3. SVG在垂直条上使用乘法滤波器
4. SVG在垂直条上使用乘法滤镜和不透明度

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

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

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

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

<svg viewBox="0 0 96 146" version="1.1" id="f-multiply-opacity" preserveAspectRatio="xMinYMin meet">
  <defs>
    <filter id="f_multiply" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
      <feBlend in="SourceGraphic" mode="multiply"/>
      <feBlend in="SourceGraphic" mode="multiply"/>
    </filter>
  </defs>
  <g id="f_shape">
    <rect x="0" y="0" width="96" height="32" fill="#EA312F" />
    <rect x="0" y="50" width="96" height="32" fill="#EA312F" />
    <rect x="0" y="50" width="32" height="96" opacity="0.8" fill="#3A5BA6" filter="url(#f_multiply)" />
  </g>
</svg>

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

谢谢!

Answer 1

这不会在许多层面上起作用.Feblend需要两个输入而不是一个.你将sourcegraphic与什么混合在一起？如果要与背景混合,则需要使用backgroundImage作为in2.如果要与其他形状混合,则必须使用feimage将该形状导入过滤器.下一个问题BackgroundImage目前仅适用于IE,并且feImage仅适用于Chrome和Safari中的引用形状(更新:您可以将引用的形状转换为内联SVG数据URI,这将跨浏览器工作).

如果您只使用彩色矩形,那么您可以使用feflood在滤镜内生成它们并将它们混合在那里.类似于以下内容:

<svg x="800px" height="600px" viewBox="0 0 200 100" version="1.1" id="f-multiply-opacity" preserveAspectRatio="xMinYMin meet">
  <defs>
    <filter id="f_multiply" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
      <feFlood x="0" y="0" width="96" height="32" flood-color="#EA312F" result="a"/>
      <feFlood x="0" y="50" width="96" height="32" flood-color="#EA312F" result="b"/>
      <feFlood rect x="0" y="50" width="32" height="96" flood-opacity="0.8" flood-color="#3A5BA6" result="c"/>
      <feBlend in="a" in2="b" result="ab" mode="multiply"/>
      <feBlend in="ab" in2="c" mode="multiply"/>
     </filter>
  </defs>
  <g id="f_shape">
    <rect filter="url(#f_multiply)" x="0" y="0" width="200" height="200"/>
  </g>
</svg>

更新:在过滤器中使用形状的跨平台方法是将它们编码为feImage中的SVG/XML数据URI.跨浏览器支持此功能(尽管它使代码难以阅读.)

Answer 2

请参阅合成和混合级别1规范.它允许指定在渲染Web内容(包括svg)时使用的合成和混合.它可以通过切换运行时标志在许多浏览器中测试,请参阅此处获取说明.为了跟上时代的浏览器支持的mix-blend-mode见caniuse.

<svg>
  <style>
    circle { mix-blend-mode: multiply; }
  </style>
  <circle cx="40" cy="40" r="40" fill="#EA312F"/>
  <circle cx="80" cy="40" r="40" fill="#3A5BA6"/>
</svg>

作为jsfiddle 在这里.