Получение атрибута 'xlink:href' элемента SVG <image> динамически с использованием JS в HTML DOM

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 URL и мне нужно начинать с самого внешнего div, а не точно с источника <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

Мой вопрос заключается в том, как правильно получить такие атрибуты от таких элементов, как SVG и его дочерние элементы?

Потому что, прежде чем я попытался сделать это, и он также работал нормально в Chrome (я не пробовал другие браузеры):

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');