Bắt 'XLink: href' thuộc tính của phần tử SVG <image> động sử dụng JS trong HTML DOM

Question

Tôi có một xây dựng:

<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> 

Tôi muốn nhận pic.jpg url và tôi cần phải bắt đầu từ các div bên ngoài nhất, không chính xác từ các yếu tố nguồn <image>:

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 

câu hỏi của tôi là đúng cách để có được loại đó của thuộc tính từ yếu tố như SVG và trẻ em của nó là gì?

Bởi vì trước khi tôi cố gắng làm theo cách này và nó cũng đã làm việc tốt trong Chrome (Tôi không thử các trình duyệt khác):

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 

Nhưng khi tôi cố gắng sử dụng getAttributeNS() tôi có kết quả trống:

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

Cách sử dụng đúng là getAttributeNS('http://www.w3.org/1999/xlink', 'href');