付加的な色の混合のためのSVGの使用（添加混合）

Question

私はadditive colorの効果を作り出すためにどのように不正行為をするか知っています。同じ基本的な解決策がanother post on hereで提案されています。

上記のポストは透明な.pngファイルを参照していますが、コンセプトは同じです。作成したい基本的な効果は、pictured hereのようなものです。

私はSVGでそれを行うのが大好きなので、拡大縮小できるので、トピックを話しているときに（トピックが「緑色」と言いましょう）、グラフィックのその部分を拡大することができます重なり合う領域は依然として正しく表示されます。

これらのポストはかなり近い取得するように見える：

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

しかし、SVGと上記の契約のいずれもので、私はそれを旋回を与えてみましょう。

Answer 1

このバージョンは、真にクロスブラウザではなかった以前のバージョンを置き換えます。私は、さまざまなサークルのために別々のシェイプを必要とせず、フィルタ内の元のシェイプを複製し、再配置し、再描画できることに気付きました。

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

Answer 2

今すぐSVG filtersでこれを行うことができます。色を混在させることに興味があるので、次のフィルタプリミティブを調べることに興味があります：feBlend、feComposite、feColorMatrixおよびfeComponentTransfer

簡単な方法（Inkscape）を学びたい場合はthis blogpostを参照してください。私はInkscape bookを読むことをお勧めします。特に行う方法はcustom filtersです。 Here's one pageにはfeBlendが表示され、基本的なエフェクトの例と同様の結果が得られます。

更新：here's the relevant svg file Inkscapeのブックから、それは（GeckoはBackgroundImageとenable-backgroundをサポートしていないことに注意してください、とBackgroundImageフィルタ入力）、SVGフィルターをサポートするブラウザで、以下の画像のようになります。