html - How to use blend mode in svg for vector shapes? -
यहां मेरा सरल एसवीजी है:
& lt;! DOCTYPE html & gt; & LT; html & gt; & Lt; शीर्ष & gt; & Lt; / head & gt; & LT; बॉडी & gt; & Lt; svg xmlns = "http://www.w3.org/2000/svg" संस्करण = "1.1" & gt; & LT; defs & gt; & Lt; फिल्टर आईडी = "एफ 1" एक्स = "0" y = "0" & gt; & Lt; feBlend mode = "multiply" = "SourceGraphic" in2 = "SourceGraphic" / & gt; & Lt; / फ़िल्टर & gt; & Lt; / defs & gt; & Lt; पथ डी = 'एम 100 100 एल 200 100 एल 200 200 एल 200 200 जेड' भरण = '# 00 एफएफएफएफ' / & gt; & Lt; पथ d = 'M150 150 L250 150 L250 250 L150 250 Z' भरण = '# CC3300' / & gt; & Lt; पथ d = 'M175 175 L275 175 L275 275 L175 275 Z' fill = '# FFFF00' / & gt; & Lt; / svg & gt; & Lt; / body & gt; & Lt; / html & gt;
इसका सरल 3 आयत आकार। क्या सभी तीन आयतों के लिए मिश्रित मोड को लागू करना संभव है?
हाँ, यह संभव है, लेकिन यह संभव नहीं है जितना अच्छा होना चाहिए उतना अच्छा होना चाहिए। यहां दो विकल्प हैं, सबसे पहले feImage का उपयोग करते हुए और दूसरी पृष्ठभूमिआइमेज फ़िल्टर इनपुट का उपयोग कर। जैसा कि आप देख सकते हैं कि दोनों में कमियां हैं। समर्थन असत्य के लिए सार्वभौमिक नहीं है, जो संदर्भ एसवीजी सामग्री और न ही पृष्ठभूमिइमेज फिल्टर इनपुट, लेकिन आप कुछ परिणामों को देखने के लिए ओपेरा या क्रोम में कोशिश कर सकते हैं।
& lt; svg xmlns = "http: // Www.w3.org/2000/svg "xmlns: xlink =" http://www.w3.org/1999/xlink "संस्करण =" 1.1 "& gt; & LT; defs & gt; & Lt; फिल्टर आईडी = "एफ 1" एक्स = "0" y = "0" चौड़ाई = "1" ऊंचाई = "1" & gt; & Lt; feImage xlink: href = "# p1" परिणाम = "पी 1" / & gt; & Lt; feImage xlink: href = "# p2" परिणाम = "p2" / & gt; & Lt; feImage xlink: href = "# p3" परिणाम = "पी 3" / & gt; & Lt; feBlend mode = "multiply" में = "p1" in2 = "p2" / & gt; & Lt; feBlend mode = "multiply" in2 = "p3" / & gt; & Lt; / फ़िल्टर & gt; & Lt; फ़िल्टर id = "f2" x = "0" y = "0" चौड़ाई = "1" ऊंचाई = "1" & gt; & Lt; feBlend mode = "multiply" = "BackgroundImage" in2 = "SourceGraphic" / & gt; & Lt; / फ़िल्टर & gt; & Lt; पथ आईडी = "पी 1" डी = 'एम 100 100 एल 200 100 एल 200 200 एल 200 200 जेड' फिल = '# 00 एफएफएफएफ' / & gt; & Lt; पथ id = "p2" d = 'm150 150 l250 150 l250 250 l150 250 z' fill = '# cc3300' / & gt; & Lt; पथ आईडी = "पी 3" डी = 'एम 175 175 L275 175 L275 275 एल 175 275 जेड' भरण = '# एफएफएफएफएक्स' / & gt; & Lt; / defs & gt; & Lt; रीसेट चौड़ाई = "100%" ऊंचाई = "100%" फिल्टर = "url (# f1)" / & gt; & Lt; g रूपांतरण = "अनुवाद (300 0)" & gt; & Lt; g सक्षम-पृष्ठभूमि = "नया" & gt; & Lt; g सक्षम-पृष्ठभूमि = "नया" & gt; & Lt; पथ डी = 'एम 100 100 एल 200 100 एल 200 200 एल 200 200 जेड' भरण = '# 00 एफएफएफएफ' / & gt; & Lt; पथ d = 'M150 150 L250 150 L250 250 L150 250 Z' भरण = '# CC3300' फ़िल्टर = "url (# f2)" / & gt; & Lt; / छ & gt; & Lt; पथ डी = 'एम 175 175 L275 175 L275 275 L175 275 Z' भरण = '# एफएफएफएफएफ़' फिल्टर = "यूआरएल (# एफ 2)" / & gt; & Lt; / छ & gt; & Lt; / छ & gt; & Lt; / svg & gt;
उम्मीद है कि हम जल्द ही सभी ब्राउज़रों में समर्थन करेंगे। यदि वह समर्थित है तो आप इसके बजाय कुछ लिख सकते हैं:
& lt; svg xmlns = "http://www.w3.org/2000/svg" संस्करण = "1.1" & gt; & LT; शैली & gt; पथ (मिश्रण-मिश्रण-मोड: गुणा; } & Lt; / style & gt; & Lt; पथ डी = 'एम 100 100 एल 200 100 एल 200 200 एल 200 200 जेड' भरण = '# 00 एफएफएफएफ' / & gt; & Lt; पथ d = 'M150 150 L250 150 L250 250 L150 250 Z' भरण = '# CC3300' / & gt; & Lt; पथ d = 'M175 175 L275 175 L275 275 L175 275 Z' fill = '# FFFF00' / & gt; & Lt; / svg & gt;
यह एक जीवित है।
Comments
Post a Comment