दिलचस्प पोस्ट
कैसे एक ऑब्जेक्ट nullable है की जांच करने के लिए? प्रति उपयोगकर्ता सबसे हाल की तिथि के साथ पंक्ति का चयन करें पायथन में पृष्ठभूमि फ़ंक्शन त्रुटि: "निर्दिष्ट LINQ अभिव्यक्ति में विभिन्न संदर्भों से संबंधित क्वेरीज़ के संदर्भ शामिल हैं" एफ # के प्रकार का अनुमान इतना चक्कर क्यों है? संकेत 11 SIGSEGV दुर्घटना Android आप कर्ल के साथ एक CORS अनुरोध डिबग कैसे कर सकते हैं? IEnumerable <T> के रूप में एक ही आइटम पास करना HTML5 ईमेल सत्यापन कैसे htaccess का उपयोग यूआरएल से फ़ोल्डर नाम को हटाने के लिए टूलबार के नीचे नेविगेशन ड्रॉवर क्या मैं div को यूएल के प्रत्यक्ष बच्चे के रूप में उपयोग कर सकता हूं? Memcached बनाम Redis? एमएस एक्सेस के खिलाफ "REPLACE" निष्पादित करने का प्रयास करते समय अपवाद सी # में डुबकी प्रकार की कमी

एक बाहरी SVG फ़ाइल में परिभाषित एक DOM ऑब्जेक्ट तक पहुंच

एसवीजी मानक बाहरी एसवीजी फाइलों का उपयोग करने और संदर्भित करने की अनुमति देता है

मेरे पास फ़ाइल सर्कल। circle.svg जो सर्कल ऑब्जेक्ट को "the_circle" आईडी के साथ परिभाषित करता है मुख्य एसवीजी फ़ाइल से मैं इस सर्कल को शामिल करने और इसे चेतन करने में सक्षम हूं, एसवीजी लिंकिंग का उपयोग कर।

मैं जावास्क्रिप्ट के माध्यम से एक ही सर्कल ऑब्जेक्ट का भी उपयोग करना चाहूंगा, मैं यह कैसे कर सकता हूं? xlink:href="url(#the_image)#the_circle" के javascript समतुल्य क्या है xlink:href="url(#the_image)#the_circle" ?

document.getElementById('the_image') उपयोग कर मैं केवल SVGImageElement तक ही पहुंच सकता हूं, लेकिन शामिल एसवीजी के भीतर परिभाषित ऑब्जेक्ट नहीं।

 <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > <image id="the_image" x="0" y="0" width="100%" height="100%" xlink:href="circle.svg" /> <animateTransform xlink:href="url(#the_image)#the_circle" attributeName="transform" attributeType="XML" type="translate" from="0" to="25" dur="1s" repeatCount="indefinite" additive="replace" fill="freeze" /> </svg> 

Solutions Collecting From Web of "एक बाहरी SVG फ़ाइल में परिभाषित एक DOM ऑब्जेक्ट तक पहुंच"

ऐसा लगता है कि ऐसा करने का "सही" तरीका वास्तव में एक छवि के बजाय एक एसवीजी "उपयोग" तत्व का उपयोग करना होगा इसका कारण यह है कि SVG उपयोग तत्व का डोम इंटरफ़ेस एक संपत्ति "instanceRoot" निर्दिष्ट करता है, जो आपको उस प्रयोग के तत्व से संबंधित "इंस्टेंस ट्री" की जड़ प्राप्त करने की अनुमति देता है: http://www.w3.org/ TR / एसवीजी / struct.html # InterfaceSVGUseElement

तो, आप ऐसे समाधान के साथ समाप्त करेंगे जो निम्न की तरह दिखता है: circle.svg:

 <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="4in" height="4in" id="the_svg" viewBox="0 0 4 4" version="1.1" xmlns="http://www.w3.org/2000/svg"> <circle r="1" fill="blue" stroke="none" id="the_circle"/> </svg> 

दस्तावेज़ जो सर्कल.svg के svg रूट नोड का उपयोग करता है:

 <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" id="foo" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <use xlink:href="circle.svg#the_svg"/> </svg> 

दुर्भाग्यवश, यद्यपि, फ़ायरफ़ॉक्स बाहरी तत्वों के साथ उपयोग तत्व का उपयोग करने में सहायता करता है, वहीं वर्तमान में वेबकिट में एक बग है जो इसे अनुमति नहीं देता: https://bugs.webkit.org/show_bug.cgi?id=12499

इसके अलावा, फ़ायरफ़ॉक्स उपयोग तत्वों के लिए instanceRoot गुण को लागू करने में प्रतीत नहीं होता है।

इसलिए, ऐसा लगता है कि आपको मौजूदा एसवीजी लागूकरण की सीमाओं के आसपास काम करना पड़ सकता है। जिस तरह से मैं यह करने की सिफारिश करता हूं, वह दस्तावेज डाउनलोड करने के लिए XMLHttpRequest का उपयोग करना है जिसे आप लिंक करना चाहते हैं, और डाउनलोड किए गए दस्तावेज़ के DOM को अपने होस्ट दस्तावेज़ के DOM में आयात कर सकते हैं। निम्नलिखित कोड इसका पालन करता है, और फ़ायरफ़ॉक्स, ओपेरा और क्रोमियम में काम करता है:

 <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" id="foo" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <script> function fetchXML (url, callback) { var xhr = new XMLHttpRequest(); xhr.open('GET', url, true); xhr.onreadystatechange = function (evt) { //Do not explicitly handle errors, those should be //visible via console output in the browser. if (xhr.readyState === 4) { callback(xhr.responseXML); } }; xhr.send(null); }; //fetch the document fetchXML("http://localhost:8082/tmp/circle.svg",function(newSVGDoc){ //import it into the current DOM var n = document.importNode(newSVGDoc.documentElement,true); document.documentElement.appendChild(n); var circle = document.getElementById("the_circle"); //now you have the circle }) </script> </svg> 

आप आवश्यक तत्व का थोड़ा आसान उपयोग कर सकते हैं:

 document.getElementById('the_image').contentDocument.getElementById('the_circle') 

संदर्भ के लिए इस छवि को देखें ( dev.opera.com पर लिया गया) यहां छवि विवरण दर्ज करें

Jcho / coffeescript में कोड के साथ @ इको-फ्लो के उत्कृष्ट समाधान को पूरक करने के लिए:

  $.get '/assets/hexagon.svg', (svgFileData)-> svgTag = svgFileData.documentElement $('body').append(svgTag) circle = $('#the_circle') 

प्रतिक्रिया और ES6 का उपयोग करते समय इस समस्या का समाधान है उपयोग:

 <SvgImage url='pathToImage.svg'></SvgImage> 

https://gist.github.com/mikkel/8b79a713ff06bbec379d