क्या एक एसवीजी ऑब्जेक्ट में भरने वाले रंग और भरने वाले पैटर्न दोनों हो सकते हैं?

Question

मैं Raphael लाइब्रेरी का उपयोग कर एसवीजी के साथ काम कर रहा हूं। मैं तो जैसे किसी ऑब्जेक्ट को भरण रंग लागू कर सकते हैं:

circle.attr({fill: "#ff0000"}); 

और यह भी काम करता है (हालांकि राफेल प्रलेखन यह उल्लेख नहीं है):

circle.attr({fill: "url(pattern.png)"}); 

मैं के रूप में पारदर्शी PNG का उपयोग करने के लिए कर रहा हूँ पैटर्न भरें, और अपेक्षित के रूप में पारदर्शिता कार्य करता है। Svg ऑब्जेक्ट पूरी तरह से पारदर्शी है जहां भरने पैटर्न छवि पारदर्शी है। लेकिन मैं जो करना चाहता हूं वह एक भरने पैटर्न छवि और एक भरने का रंग निर्दिष्ट करता है, ताकि रंग दिखाएगा कि पैटर्न छवि पारदर्शी है - उदाहरण के लिए, 'पृष्ठभूमि' संपत्ति के समान, उदाहरण के लिए। क्या यह एसवीजी के साथ संभव है?

Answer 1

आप एक पैटर्न को परिभाषित कर सकते हैं जिसमें भरने के साथ एक आयत है, और एक छवि जो उस आय के शीर्ष पर आपकी पीएनजी है। फिर सर्कल के लिए भरने वाले पैटर्न का उपयोग करें (या जो भी तत्व आप चाहते हैं)।

इसका मतलब है राफेल के बाहर कदम उठाना, या जो भी आप चाहते हैं उसे करने के लिए विस्तारित करना। ध्यान दें कि ({fill: "url(pattern.png)"}) एक पैटर्न तत्व बनाने और दिए गए यूआरएल को इंगित करने वाले छवि तत्व को जोड़ना है। राफेल को हैक करना भी संभव है ताकि आप रंग भी पारित कर सकें, और उसके बाद आप उस कोड में उस कोड से निपटें जो समान आयामों के एक रेक्ट को बनाकर पैटर्न बनाता है जैसा चित्र दिया गया रंग है।

मुझे यह कहना चाहिए कि यदि आप इसे आईई < 9 के साथ काम करना चाहते हैं तो आपको शायद इसे वीएमएल में भी लागू करने की आवश्यकता है।

अन्य विकल्पों में दो आकार ड्राइंग, रंग भरने वाला एक और दूसरा रास्टर छवि भरने के साथ शामिल है। फिर भी एक और पीएनजी को पृष्ठभूमि रंग शामिल करना है ताकि यह पारदर्शी न हो।