Graphics 使用SVG进行加法颜色混合（加法混合）

来自平面设计的背景，我知道如何欺骗创造一种效果。中提出了相同的基本解决方案

上面的帖子指的是透明的

.png

文件，但概念是一样的。我想创造的基本效果是这样的

我希望在SVG中这样做，这样它就可以缩放，这样当我谈论一个给定的主题（让我们说这个主题是“绿色”）时，我可以放大图形的这一部分，重叠区域仍然可以正确显示

这些帖子似乎非常接近：

---

但是上面没有一个是关于SVG的，所以让我来试一试。

现在您可以用SVG来实现这一点。由于您的兴趣在于混合颜色，因此您可能对研究以下过滤器原语感兴趣：、和

如果您想学习简易方法（Inkscape），请参阅。我也可以推荐阅读，尤其是如何做。以与基本效果示例中类似的结果显示feBlend

---

更新：从inkscape手册中可以看出，在支持svg过滤器的浏览器中，它应该看起来像下面的图像（以及

背景图像

过滤器输入，请注意Gecko不支持

背景图像

和

启用背景

）

此版本取代了以前的版本，该版本不是真正的跨浏览器版本。我意识到，我不需要为不同的圆使用不同的形状，我可以在过滤器中克隆、重新定位和重新定位原始形状

来自，示例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>

circle{mix-blend mode:screen；}

我刚刚登录，看到了下面的答案，略读了一下，它看起来正是我所想的，但是…我在Adobe Illustrator中创建了一个图形，但意识到规则的透明度会给我添加颜色，所以我用完全不透明的颜色进行模拟；我不认为这会有什么帮助…一个3层（3个重叠的圆环）的有规则透明度的图片会不会被贴到小提琴上？我甚至从来没有听说过这些过滤器是标准的一部分！乍一看，我以为“fe”可能是某种供应商前缀，但我错了。谢谢。这些示例的问题在于它们依赖于“启用后台”——这在webkit或mozilla上都不起作用（不知道opera）。如果要使用过滤器来实现这一点，我认为必须引入图像（或使用灯光效果创建彩色圆圈）。示例可能使用

启用背景

，但可以避免使用该选项。是的，Opera长期以来一直支持

启用后台。IIRC IE10还支持
启用后台
。仅供参考-我已经针对Chromium提交了一个bug，用于启用后台支持。如果你有一个没有启用背景的例子，我很想看看。我自己还没有弄明白这一点，可以使用引用svg中某些特定元素的方法作为部分解决方法（但是，请注意Firefox不支持）。通过这种方式，你可以合成/混合两个或多个任意元素。不使用Mozilla和Webkit肯定会破坏交易。你能告诉我更多关于“过滤中”效果（第一个例子）的信息（或解释多一点）的方向吗？看着它，我觉得我基本上明白了，但我没有看到任何会产生黄色或青色的东西（我假设“最终”是白色），也没有看到黑色笔划（这是因为没有为笔划指定宽度吗？）。谢谢。我看到了“启用背景”参考资料和注释，不过我会回去仔细阅读，谢谢。