svg - 使用 SVG 使用混合过滤器(更具体地说是相乘)

Question

我有一个我试图使用 SVG 实现的效果的引用图像。



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

颜色具有以下十六进制值:

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

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

原始 Photoshop 位图

SVG 只使用形状没有过滤器

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

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 .