क्या बाहरी फ़ाइल के बिना एसवीजी के साथ वेबकिट सीएसएस मास्क का उपयोग करना संभव है?

Question

वेबकिट बाहरी एसवीजी फ़ाइल के किसी भी HTML तत्व के लिए मास्क के रूप में उपयोग करने की अनुमति देता है। अर्थात्:

(अधिक जानकारी यहां: http://webkit.org/blog/181/css-masks/)

<img src="kate.png" style="-webkit-mask-image: url(circle.svg)"> 

में परिणामस्वरूप

किसी को भी वहाँ एक बाहरी एसवीजी फ़ाइल के बिना यह करने के लिए कोई तरीका है पता है? अधिक विशेष रूप से, क्या यह जावास्क्रिप्ट से उत्पन्न एसवीजी के साथ किया जा सकता है?

Answer 1

ठीक है, बाहर की जाँच दो साल बीत चुके हैं मैं इस प्रश्न पूछा और ब्राउज़र परिदृश्य बहुत बदल: यहाँ एक उदाहरण है कि मैं बनाया है। यहाँ का एक उदाहरण है कि वास्तव में क्या मुझे क्या करना है, जो अब के लिए Firefox में ही काम करता है चाहता था: http://mozilla.seanmartell.com/persona/

तुम वहाँ जो निम्नलिखित शैली है आईडी chameleon साथ एक div है देख सकते हैं:

<div id="chameleon" style="clip-path:url(#clip1); -webkit-mask-box-image: url(mask.png);"> 

#clip1 अंक एक इनलाइन एसवीजी तत्व के अंदर एक clipPath तत्व जो एक आकार से जुड़ा हुआ है।

<clipPath id="clip1"><use xlink:href="#shape1"/></clipPath> 

तो अब यह फ़ायरफ़ॉक्स में करने योग्य है। व्यावहारिक उदाहरण के लिए

धन्यवाद @mart3ll!

Answer 2

मुझे वेबकिट विशिष्ट एक्सटेंशन के बारे में निश्चित नहीं है लेकिन मोज़िला आपको HTML तत्वों पर मास्क और फ़िल्टर जैसे एसवीजी प्रभावों को लागू करने की अनुमति देता है। इन्हें बाहरी फाइलों में या सीधे मार्कअप में परिभाषित किया जा सकता है। this post देखें। यह इस समय किसी भी कल्पना में नहीं है, लेकिन एसवीजी और सीएसएस कार्यकारी समूह इस दृष्टिकोण को दर्शाने के लिए मिलकर काम कर रहे हैं। Working Group's page देखें (हालांकि केवल फ़िल्टर, मास्क का स्पष्ट रूप से उल्लेख नहीं किया गया है)।

आप आमतौर पर यूआरएल मान (जैसे url (#someID) में तत्व की आईडी सहित एसवीजी में कुछ से लिंक कर सकते हैं। आप जेएस के माध्यम से एसवीजी उत्पन्न करने का प्रयास कर सकते हैं, इसे एक आईडी देकर दस्तावेज़ में इंजेक्ट कर सकते हैं और देख सकते हैं कि यह काम करता है या नहीं। कोई कल्पना नहीं है क्योंकि यह एक वेबकिट एक्सटेंशन है इसलिए इसे कोशिश किए बिना कहना मुश्किल है।

Answer 3

हाँ मुझे विश्वास है कि यह संभव है। हाल ही में मैंने एसवीजी फ़ाइल उत्पन्न करने के लिए PHP का उपयोग किया था।

http://jsfiddle.net/brokeneye/ygsKm/

इसके अलावा http://raphaeljs.com/