使用 SVG 使用混合过滤器（更具体地说是相乘）

Question

我有一张我尝试使用 SVG 实现的效果的参考图片。

在 Photoshop 中，可以通过使用 100% 不透明度并将混合模式设置为“正片叠底”来实现效果

颜色的十六进制值为：

红色：#EA312F，蓝色：#3A5BA6，重叠区域：#35111F

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

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

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

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

我还想使用诸如http://snapsvg.io/ 之类的库为这些形状中的每一个设置动画，因此我希望纯粹依靠过滤器，而不是裁剪或其他操作来实现所需的结果 - 但我愿意建议。

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

<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

请参阅Compositing and Blending Level 1 spec。它可以指定在渲染 Web 内容（包括 svg）时使用的合成和混合。它可以通过切换运行时标志在许多浏览器中进行测试，请参阅here for instructions。有关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 here.

Answer 2

这不适用于多个级别。 Feblend 接受两个输入而不是一个。您将源图形与什么混合？如果你想与背景融合，你需要使用 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 3

对于所有 feBlend 模式，结果不透明度计算如下：

qr = 1 - (1-qa)*(1-qb)

对于以下合成公式，适用以下定义：

cr = Result color (RGB) - premultiplied 
qa = Opacity value at a given pixel for image A 
qb = Opacity value at a given pixel for image B 
ca = Color (RGB) at a given pixel for image A - premultiplied 
cb = Color (RGB) at a given pixel for image B - premultiplied 
The following table provides the list of available image blending modes:

计算结果颜色的图像混合模式公式

normal  cr = (1 - qa) * cb + ca
multiply    cr = (1-qa)*cb + (1-qb)*ca + ca*cb
screen  cr = cb + ca - ca * cb
darken  cr = Min ((1 - qa) * cb + ca, (1 - qb) * ca + cb)
lighten cr = Max ((1 - qa) * cb + ca, (1 - qb) * ca + cb)

来自http://www.w3.org/TR/SVG/filters.html#feBlendElement