相关疑难解决方法(0)

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

我有一个结构:

<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>
Run Code Online (Sandbox Code Playgroud)

我想得到pic.jpg网址,我需要从最外层的div开始,而不是完全来自source <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
Run Code Online (Sandbox Code Playgroud)

我的问题是从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 …
Run Code Online (Sandbox Code Playgroud)

svg dom xlink

11
推荐指数
1
解决办法
1万
查看次数

标签 统计

dom ×1

svg ×1

xlink ×1