使用SVG进行添加色混合（添加混合）

来自平面设计背景我知道如何作弊以创建效果additive color。在another post on here中提出了相同的基本解决方案。使用SVG进行添加色混合（添加混合）

上面的帖子是指透明的.png文件，但概念是相同的。我想创建的基本效果就像一个pictured here。

我很想在SVG中这样做，以便它可以扩展，所以当我在谈论某个特定主题时（我们只是说主题是'绿色'），我可以放大该图形的部分和重叠区域仍然可以正确显示。

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

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

2012-12-19 adam-asdf

我只是登录，看到下面的答案，略读它看起来正是我想的，但...我创建在Adobe Illustrator中的图形，但实现定期透明度会给我加色，所以我模拟完全不透明的颜色;我认为这不会有帮助......将一张3层（3个重叠的戒指）图形与常规透明度张贴到小提琴作品中？ –

该版本取代了并非真正跨浏览器的早期版本。我意识到，我不需要为各种不同的圈子分开设计形状，我可以在滤镜中克隆，重新定位和重新着色原始形状。

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

来源

2012-12-21 18:53:23

Mozilla和Webkit无法工作绝对是一个交易断路器。你能指出我有关“过滤器”效应（第一个例子）的更多信息（或更多解释）的方向吗？看着它，我觉得我基本上都明白了，但我没有看到任何会产生黄色或青色的东西（我认为'最终'是白色的），我也看不到黑色的笔画（是因为没有宽度分配给中风？）。谢谢。 –

我看到'启用背景'参考和笔记，我会回去仔细阅读它们，谢谢。 –

现在你可以用SVG filters来做到这一点。由于您的兴趣在于混合颜色，因此您可能有兴趣研究以下滤镜基元：feBlend,feComposite,feColorMatrix和feComponentTransfer。

如果你想学习简单的方法（Inkscape），请参阅this blogpost。我也可以推荐阅读Inkscape book，特别是如何做custom filters。 Here's one page显示与您的基本效果示例中的效果类似的效果。

更新：here's the relevant svg file从Inkscape的书，它应该看起来像下面在支持SVG过滤器的浏览器的图像（和BackgroundImage滤波器输入，注意，壁虎不支持BackgroundImage和enable-background）。 feBlend variations

来源

2012-12-19 10:21:12

我甚至从来没有听说过这些过滤器作为标准的一部分！乍一看，我认为'fe'可能是某种供应商的前缀，男孩是我错了。谢谢。 –

这些示例的问题在于它们依赖于“启用背景” - 它现在不适用于webkit或mozilla（不知道歌剧）。如果你打算使用过滤器来做到这一点，我认为你必须拉图像（或使用光照效果创建色环） –

这些示例可能使用'enable-background'，但可以避免使用它。是的，Opera已经支持'enable-background'很长一段时间了。 IIRC IE10还支持'enable-background'。 –

使用SVG进行添加色混合（添加混合）

回答

相关问题