使用 SVG 进行加色混合（additive blending）

Posted 2023-03-06

【中文标题】使用 SVG 进行加色混合（additive blending）

【英文标题】：Using SVG for additive color mixing (additive blending)

【发布时间】：2012-12-06 07:18:43

【问题描述】：

来自平面设计背景，我知道如何作弊以创建additive color 的效果。 another post on here中提出了相同的基本解决方案。

上面的帖子是指透明的.png 文件，但概念是一样的。我想创建的基本效果就像pictured here。

我很想在 SVG 中做它，以便它可以缩放，这样当我谈论给定主题时（假设主题是“绿色”），我可以放大图形的那部分和重叠区域仍会正确显示。

这些帖子似乎非常接近：

Algorithm for Additive Color Mixing for RGB Values Question about "Additive blending" and "Hue replacement"

但以上都没有涉及 SVG，所以让我试一试。

【问题讨论】：

我刚刚登录并看到下面的答案，略读了一下，它看起来正是我的想法，但是......我在 Adob​​e Illustrator 中创建了一个图形，但意识到常规透明度会给我添加颜色所以我用完全不透明的颜色进行模拟；我认为这不会有帮助...将具有常规透明度的 3 层（3 个重叠环）图形张贴到小提琴上吗？

【参考方案1】：

此版本取代了并非真正跨浏览器的早期版本。我意识到我不需要为各个圆圈设置单独的形状，我可以在滤镜中克隆、重新定位和重新着色原始形状。

<svg x="0px" y="0px"   viewbox="0 0 600 600">
    
    <defs>
    <filter id="B4" x="-150%"  y="-150%" >
      <feOffset in="SourceGraphic" result="pre-red" dx="-70" dy="-120"/>
      <feColorMatrix in="pre-red" type="matrix" result="red" values="0 0 0 0 1
                                                       0 0 0 0 0 
                                                       0 0 0 0 0 
                                                       0 0 0 1 0"/>

      <feOffset in="SourceGraphic" result="pre-blue" dx="70" dy="-120"/>
      <feColorMatrix in="pre-blue" type="matrix" result="blue" values="0 0 0 0 0
                                                       0 0 0 0 0 
                                                       0 0 0 0 1 
                                                       0 0 0 1 0"/> 
      <feBlend mode="screen" in="red" in2="blue" result="main"/>
      <feBlend mode="screen" in="main" in2="SourceGraphic"/>
    </filter>
    </defs>
    
       <circle filter="url(#B4)" cx="200" cy="250" r="100"  fill="#00FF00"  />
    
    </svg>

【讨论】：

不在 Mozilla 和 Webkit 上工作绝对是一个交易破坏者。您能否指出与“过滤”效果（第一个示例）有关的更多信息（或解释更多）的方向？看着它，我觉得我基本上明白了，但我没有看到任何会产生黄色或青色的东西（我假设“最终”是白色的），也没有看到黑色笔触（那是因为没有宽度分配给中风？）。谢谢。

我看到了 'enable-background' 引用和注释，不过我会回去仔细阅读它们，谢谢。

【参考方案2】：

来自https://drafts.fxtf.org/compositing-1/#mix-blend-mode，示例2：

circle  mix-blend-mode: screen; 

<svg>
    <circle cx="40" cy="40" r="40" fill="red"/>
    <circle cx="80" cy="40" r="40" fill="lime"/>
    <circle cx="60" cy="80" r="40" fill="blue"/>
</svg>

【参考方案3】：

现在您可以使用SVG filters 执行此操作。由于您的兴趣在于混合颜色，您可能有兴趣研究以下过滤器原语：feBlend、feComposite、feColorMatrix 和 feComponentTransfer。

如果您想学习简单的方法 (Inkscape)，请参阅 this blogpost。我还可以推荐阅读Inkscape book，尤其是如何做custom filters。 Here's one page 显示 feBlend 的结果与您的基本效果示例类似。

更新： here's the relevant svg file 来自 inkscape 书籍，在支持 svg 过滤器（以及 BackgroundImage 过滤器输入，请注意 Gecko 不支持 @ 987654333@ 和 enable-background)。

【讨论】：

我从来没有听说过这些过滤器是标准的一部分！乍一看，我认为“fe”可能是某种供应商前缀，我错了。谢谢。

这些例子的问题在于它们依赖于“启用背景”——这在 webkit 或 mozilla 上都不起作用（不知道歌剧）。如果你打算使用滤镜来做到这一点，我认为你必须拉入图像（或使用灯光效果创建色环）

示例可能使用enable-background，但可以避免使用它。是的，Opera 长期以来一直支持enable-background。 IIRC IE10 也支持enable-background。

仅供参考 - 我已经针对 Chromium 提交了一个错误，以获得启用后台支持。如果您有一个没有启用背景的示例，我很乐意看到它。我自己无法弄清楚这一点

可以使用引用 svg 中某些特定元素的 作为部分解决方法（但是，请注意 Firefox 不支持）。通过这种方式，您可以合成/混合两个或多个任意元素。