javascript - आप किसी<img>तत्व में किसी SVG फ़ाइल की सामग्री तक कैसे पहुंच सकते हैं?



html html5 (5)

नहीं, संभव नहीं है लेकिन आप यहां <img> से <svg> को कन्वर्ट कर सकते हैं जैसा कि HERE बताया गया है और आप बस डीओएम में svg में नोड्स तक पहुंच सकते हैं।

मान लें कि यह आपके एचटीएमएल में है:

<img src='example.svg' />

जावास्क्रिप्ट के माध्यम से example.svg की सामग्री (यानी <rect>, <circle>, <ellipse> , आदि ..) तक आप कैसे पहुंचेंगे?


मुझे यकीन है कि यह संभव नहीं है। बाहरी एसवीजी एक इनलाइन एसवीजी के रास्ते में डीओएम का हिस्सा नहीं है, और मुझे विश्वास नहीं है कि आप लोडिंग दस्तावेज़ से एसवीजी डोम पेड़ तक पहुंच सकते हैं।

एजेक्स अनुरोध का उपयोग करके आप एसवीजी को एक्सएमएल के रूप में लोड कर सकते हैं, और इसे डीओएम में एक इनलाइन एसवीजी के रूप में डालें, फिर आप चल सकते हैं और हेरफेर कर सकते हैं। यह डी 3 उदाहरण तकनीक का प्रदर्शन करता है। मुझे लगता है कि यहां इस्तेमाल किया गया d3.xml() फ़ंक्शन d3.xml() jQuery के $.ajax() d3.xml() बराबर कम या कम है d3.xml() dataType: "xml"


img तत्व से एक संदर्भित एसवीजी के डीओएम प्राप्त करना संभव नहीं है।

यदि आप <object> , <embed> या <iframe> उपयोग करते हैं, तो फिर आप संदर्भित svg, या .getSVGDocument प्राप्त करने के लिए .contentDocument (पसंदीदा) का उपयोग कर सकते हैं जो पुराने svg प्लगइन के साथ अधिक संगत हो सकता है।

यहां एक example कि एक संदर्भित एसवीजी के डीओएम को कैसे प्राप्त किया जाए।


यदि आप सीवी url(data:...) में एसवीजी की इनलाइनिंग का उपयोग कर रहे हैं या सिर्फ url(*.svg) पृष्ठभूमि का उपयोग कर रहे हैं, तो आप उन्हें svg-embed साथ डीओएम में एम्बेड कर सकते हैं।

क्रोम 11+, सफारी 5+, फ़ायरफ़ॉक्स 4+ और आईई 9 + का समर्थन करें।


आम तौर पर जावा स्क्रिप्ट सख्त नियमों का पालन नहीं करती है इसलिए त्रुटियों की संभावना बढ़ रही है। उपयोग करने के बाद "use strict", जावा स्क्रिप्ट कोड को नियमों के सख्त सेट का पालन करना चाहिए जैसे अन्य प्रोग्रामिंग भाषाओं जैसे कि टर्मिनेटर का उपयोग, प्रारंभिकरण से पहले घोषणा आदि।

यदि "use strict"प्रयोग किया जाता है तो कोड नियमों के सख्त सेट का पालन करके लिखा जाना चाहिए जिससे त्रुटियों और अस्पष्टताओं की संभावना कम हो।





javascript html html5 svg