使用SVG进行加色混合（添加混合） [英] Using SVG for additive color mixing (additive blending)

问题描述

来自平面设计背景，我知道如何欺骗以创建附加颜色的效果。在另一篇文章中提出了同样的基本解决方案这里。

Coming from a graphic design background I know how to cheat to create an effect of additive color. The same basic solution is proposed in another post on here.

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

The post above refers to transparent .png files but the concept is the same. The basic effect I'd like to create is like the one pictured here.

我喜欢在SVG中做，所以它可以扩展，所以当我谈论一个给定的主题（让我们只说主题是绿色 ）我可以放大图形的部分，重叠区域仍然会正确显示。

I'd love to do it in SVG so that it can scale and so that when I am talking about a given topic (let's just say the topic is 'green') I can enlarge that portion of the graphic and the overlapping areas would still display correctly.

这些帖子似乎非常接近：

These posts seem to get pretty close:

• 添加剂算法RGB值的颜色混合


• 关于添加剂混合的问题和色相替换

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

但是上面没有一个处理SVG，所以让我给它一个旋转。 / p>

But none of the above deal with SVG so let me give it a whirl.

推荐答案

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

This version replaces an earlier version that wasn't truly cross-browser. I realized that I didn't need separate shapes for the various circles, I could clone, reposition and recolor the original shape within the filter.

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

这篇关于使用SVG进行加色混合（添加混合）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！