Używanie SVG do dodatkowego mieszania kolorów (mieszania dodatków)

Question

Pochodzę z tła graficznego Wiem, jak oszukiwać, aby stworzyć efekt additive color. To samo podstawowe rozwiązanie zaproponowano w another post on here.

Powyższy post dotyczy przezroczystych plików .png, ale koncepcja jest taka sama. Podstawowy efekt, który chciałbym stworzyć, jest taki, jak ten pictured here.

Chciałbym zrobić to w SVG, aby można było skalować i tak, że gdy mówię o danym temacie (powiedzmy, że temat jest "zielony"), mogę powiększyć tę część grafiki i zachodzące obszary będą nadal wyświetlane poprawnie.

Stanowiska te wydają się dość blisko:

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

Ale żaden z powyższej umowy z SVG więc pozwól mi dać jej wir.

Answer 1

Ta wersja zastępuje starszą wersję, która nie była prawdziwie w różnych przeglądarkach. Zdałem sobie sprawę, że nie potrzebuję osobnych kształtów dla różnych kręgów, mogę klonować, zmieniać położenie i ponownie kolorować pierwotny kształt w filtrze.

<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

Teraz możesz to zrobić za pomocą SVG filters. Ponieważ twoje zainteresowanie polega na mieszaniu kolorów, możesz zainteresować się badaniem następujących prymitywów filtrów: feBlend, feComposite, feColorMatrix i feComponentTransfer.

Jeśli chcesz się uczyć w łatwy sposób (Inkscape), zobacz this blogpost. Mogę również polecić lekturę Inkscape book, aw szczególności, jak wykonać custom filters. Here's one page przedstawiający feBlend z podobnymi wynikami, jak w przykładzie z podstawowym efektem.

Aktualizacja:here's the relevant svg file z książki Inkscape, powinno to wyglądać jak na zdjęciu poniżej w przeglądarkach obsługujących filtrów SVG (a wejście BackgroundImage filtra należy pamiętać, że Gecko nie obsługuje BackgroundImage i enable-background).