Verwenden von SVG für additive Farbmischung (additive Blending)

Question

Aus einem Grafik-Design-Hintergrund Ich weiß, wie man schummelt, um einen Effekt von additive color zu erstellen. Die gleiche grundlegende Lösung wird in another post on here vorgeschlagen.

Der Beitrag oben bezieht sich auf transparente .png Dateien, aber das Konzept ist das gleiche. Der grundlegende Effekt, den ich erstellen möchte, ist wie der pictured here.

Ich würde es gerne in SVG tun, so dass es skalieren kann und so, wenn ich über ein bestimmtes Thema spreche (sagen wir einfach, das Thema ist 'grün') kann ich diesen Teil der Grafik und der vergrößern überlappende Bereiche würden immer noch korrekt angezeigt.

Diese Stellen scheinen ziemlich nahe zu kommen:

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

Aber keine der oben genannten Deal mit SVG so lassen Sie mich es einen Wirbel geben.

Answer 1

Diese Version ersetzt eine frühere Version, die nicht wirklich Browser-übergreifend war. Ich erkannte, dass ich für die verschiedenen Kreise keine separaten Formen brauchte, ich konnte die ursprüngliche Form innerhalb des Filters klonen, neu positionieren und neu einfärben.

<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

Jetzt können Sie dies mit SVG filters tun. Da Ihr Interesse im Mischen von Farben liegt, könnten Sie die folgenden Filterprimitive interessieren: feBlend, feComposite, feColorMatrix und feComponentTransfer.

Wenn Sie den einfachen Weg (Inkscape) lernen wollen, siehe this blogpost. Ich kann auch empfehlen, die Inkscape book zu lesen und insbesondere, wie man custom filters macht. Here's one page zeigt feBlend mit ähnlichen Ergebnissen wie in Ihrem Basiseffektbeispiel.

Update:here's the relevant svg file vom inkscape Buch, es ist wie das Bild unten in Browsern aussehen sollte, die SVG-Filter unterstützen (und den BackgroundImage Filtereingang, beachten Sie, dass Gecko nicht BackgroundImage und enable-background nicht unterstützt).