10

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

上面的帖子是指透明.png文件，但概念是相同的。我想要创建的基本效果就像这里所描绘的那样。

我很想在 SVG 中做它，以便它可以缩放，这样当我谈论给定主题时（假设主题是“绿色”）我可以放大图形的那部分并且重叠区域仍然会正确显示。

这些帖子似乎非常接近：

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

4

3 回答 3

12

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

如果您想学习简单的方法 (Inkscape)，请参阅此博文。我还可以推荐阅读Inkscape 书，尤其是如何进行自定义过滤器。这是显示 feBlend 的一页，其结果与您的基本效果示例类似。

更新： 这是来自 inkscape 书中的相关 svg 文件，它在支持 svg 过滤器的浏览器中应该如下图所示（以及BackgroundImage过滤器输入，请注意 Gecko 不支持BackgroundImageand enable-background）。feBlend 变体

于 2012-12-19T10:21:12.807 回答
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-21T18:53:23.220 回答
1

来自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>
于 2019-10-02T14:29:22.513 回答