使用SVG对于加色混合（添加剂共混）(Using SVG for additive color mi

从图形设计背景的人，我知道怎么作弊创建的效果加色 。 相同的基本解决方案中提出在这里另一职务 。

上述职位是指透明.png文件，但概念是相同的。 我想创建的基本作用是像一个图为 。

我喜欢做的SVG，以便它可以扩展，因此，当我谈论特定主题（让我们只想说的话题是“绿色”）我可以放大和图形的那部分的重叠区域仍然坚持正确显示。

这些岗位似乎得到相当接近：

• 算法的加色混合的RGB值
• 关于“添加剂调合”和“色相更换”问题

但没有上述处理SVG的，所以让我给它一个旋转。

Answer 1:

此版本取代早期版本，这不是真正的跨浏览器。 我意识到，我并不需要单独的形状为各界，我会克隆，重新定位和过滤器内重新着色原来的形状。

<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 2:

现在你可以做到这一点SVG滤镜 。 由于您的兴趣在于混合的颜色，你可能有兴趣在研究以下过滤器原语： feBlend ， feComposite ， feColorMatrix和feComponentTransfer 。

如果您想了解最简单的方式（Inkscape中）看到我这篇文章 。 我也可以推荐阅读Inkscape的书 ，特别是如何做到自定义过滤器 。 这里有一个页面显示了类似的结果在你的基本效果的一例feBlend。

更新： 这里的相关SVG文件从Inkscape的书，它应该看起来像下面在支持SVG过滤器的浏览器的图像（和BackgroundImage滤波器输入，注意，壁虎不支持BackgroundImage和enable-background ）。

文章来源: Using SVG for additive color mixing (additive blending)