योजक रंग मिश्रण (योजक मिश्रण) के लिए एसवीजी का उपयोग

Question

ग्राफिक डिज़ाइन पृष्ठभूमि से आ रहा है, मुझे पता है कि additive color का प्रभाव बनाने के लिए धोखा कैसे है। another post on here में वही बुनियादी समाधान प्रस्तावित किया गया है।

उपर्युक्त पोस्ट पारदर्शी .png फ़ाइलों को संदर्भित करता है लेकिन अवधारणा वही है। मूल प्रभाव जो मैं बनाना चाहता हूं वह एक pictured here जैसा है।

मैं एसवीजी में यह करने के लिए इतना है कि यह बड़े पैमाने और कर सकें, ताकि जब मैं किसी दिए गए विषय के बारे में बात कर रहा हूँ मैं ग्राफिक और के उस भाग को बड़ा कर सकते हैं (के सिर्फ इतना कहना विषय 'हरित' है भी नहीं) ओवरलैपिंग क्षेत्र अभी भी सही तरीके से प्रदर्शित होंगे।

कि इन पोस्ट को बहुत करीब पाने के लिए लग रहे हैं:

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

लेकिन एसवीजी के साथ ऊपर में से कोई भी सौदा इसलिए मुझे इसे एक बार आज़माएंगे करते हैं।

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।

यदि आप आसान तरीका सीखना चाहते हैं (इंकस्केप) this blogpost देखें। मैं Inkscape book पढ़ने और विशेष रूप से custom filters को पढ़ने की सलाह भी दे सकता हूं। Here's one page आपके मूल प्रभाव उदाहरण के समान परिणामों के साथ feBlend दिखा रहा है।

अद्यतन: इंकस्केप किताब से here's the relevant svg file, यह ब्राउज़रों कि svg फिल्टर समर्थन में नीचे दी गई छवि की तरह दिखना चाहिए (और BackgroundImage फिल्टर इनपुट, ध्यान दें कि छिपकली BackgroundImage और enable-background समर्थन नहीं करता)।