使用 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 值的加色混合算法
• 关于添加剂混合"的问题；和色调替换"

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

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

推荐答案

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

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