使用SVG进行加色混合(添加剂混合)

Question

来自平面设计背景,我知道如何作弊创造加色的效果.在这里的另一篇文章中提出了相同的基本解决方案.

上面的帖子是指透明.png文件,但概念是相同的.我想创建的基本效果就像这里所描绘的那样.

我喜欢在SVG中这样做,以便它可以扩展,所以当我谈论一个给定的主题时(让我们只说主题是'绿色')我可以放大图形的那一部分,重叠的区域仍然会正确显示.

这些帖子似乎非常接近:

• RGB值的加色混合算法
• 关于"添加剂混合"和"色调替换"的问题

但是上面没有一个与SVG有关,所以让我给它一个旋转.

Answer 1

现在,您可以使用SVG过滤器执行此操作.由于您的兴趣在于混合颜色,您可能有兴趣研究以下过滤器基元:feBlend,feComposite,feColorMatrix和feComponentTransfer.

如果你想学习简单的方法(Inkscape),请参阅此博文.我还建议您阅读Inkscape书籍,特别是如何自定义过滤器.这是一个显示feBlend 的页面,其结果与您的基本效果示例相似.

更新: 这是来自inkscape书的相关svg文件,它应该看起来像支持svg过滤器的浏览器中的下图(以及BackgroundImage过滤器输入,请注意Gecko不支持BackgroundImage和enable-background).

Answer 2

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

<svg x="0px" y="0px" width="600px" height="600px" viewbox="0 0 600 600">
    
    <defs>
    <filter id="B4" x="-150%" width="400%" y="-150%" height="400%">
      <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>

Answer 3

来自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>