使用HTML DOM中的JS动态获取SVG <image>元素的'xlink:href'属性

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，我需要从最外层的

开始，而不是仅仅从<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

- Green

Answer 1

正确的用法是getAttributeNS('http://www.w3.org/1999/xlink', 'href');

- Robert Longson

---

谢谢！这个答案帮助我使用JavaScript设置SVG内容中图片的xlink:href属性。我的代码看起来像这样：img.setAttributeNS('http://www.w3.org/1999/xlink', 'href', 'new.url')，其中new.url是我想用来替换原始图片的URL地址。 - grw

使用jquery与SVG会让你遇到很多问题，最好避免使用。 - Robert Longson