हो रही है 'XLink: href' एसवीजी <image> तत्व गतिशील जे एस का उपयोग करके HTML डोम

Question

में की विशेषता मैं एक निर्माण किया है:

<div id="div"> 
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="svg"> 
     <image x="2cm" y="2cm" width="5cm" height="5cm" id="img" xlink:href="pic.jpg"></image> 
    </svg> 
</div> 

मैं pic.jpg यूआरएल प्राप्त करना चाहते हैं और मैं सबसे बाहरी div से शुरू करने की आवश्यकता,

var div = document.getElementById("div"); 
var svg = div.getElementsByTagNameNS('http://www.w3.org/2000/svg', 'svg')[0]; 
var img = svg.getElementsByTagNameNS('http://www.w3.org/2000/svg', 'image')[0]; 
var url = img.getAttribute('xlink:href'); // Please pay attention I do not use getAttributeNS(), just usual getAttribute() 

alert(url);  // pic.jpg, works fine 

मेरा प्रश्न क्या सही तरीके से एसवीजी और उसके बच्चों की तरह तत्व की विशेषताओं के इस तरह प्राप्त करने के लिए है: स्रोत <image> तत्व से बिल्कुल नहीं?

क्योंकि इससे पहले कि मैं इस तरह से करने की कोशिश की और यह भी क्रोम में ठीक काम किया (मैं अन्य ब्राउज़र की कोशिश नहीं की):

var svg = div.getElementsByTagName('svg')[0]; // I do not use NS 
var img = svg.getElementsByTagName('image')[0]; 
var url = img.getAttribute('xlink:href'); // and do not use getAttributeNS() here too 

alert(url);  // pic.jpg, works fine 

लेकिन जब मैं getAttributeNS() का उपयोग करने की कोशिश की मैं खाली परिणाम मिला:

var svg = div.getElementsByTagNameNS('http://www.w3.org/2000/svg', 'svg')[0]; 
var img = svg.getElementsByTagNameNS('http://www.w3.org/2000/svg', 'image')[0]; 

// Please pay attention I do use getAttributeNS() 
var url = img.getAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href'); 

alert(url);  // but I got black result, empty alert window 

Answer 1

सही उपयोग getAttributeNS('http://www.w3.org/1999/xlink', 'href');