获取 SVG <image> 的“xlink:href"属性在 HTML DOM 中动态使用 JS 的元素 [英] Getting 'xlink:href' attribute of the SVG <image> element dynamically using JS in HTML DOM
问题描述
我有一个结构:
<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>
我想获得 pic.jpg
url,我需要从最外面的 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', '图片')[0];var url = img.getAttribute('xlink:href');//请注意我没有使用 getAttributeNS(),只是通常的 getAttribute()警报(网址);//pic.jpg,工作正常
我的问题是从 SVG 及其子元素等元素获取此类属性的正确方法是什么?
因为在我尝试这样做之前,它在 Chrome 中也运行良好(我没有尝试其他浏览器):
var svg = div.getElementsByTagName('svg')[0];//我不使用 NSvar img = svg.getElementsByTagName('image')[0];var url = img.getAttribute('xlink:href');//也不要在这里使用 getAttributeNS()警报(网址);//pic.jpg,工作正常
但是当我尝试使用 getAttributeNS()
时,我得到了空白结果:
var svg = div.getElementsByTagNameNS('http://www.w3.org/2000/svg', 'svg')[0];var img = svg.getElementsByTagNameNS('http://www.w3.org/2000/svg', '图片')[0];//请注意我确实使用了 getAttributeNS()var url = img.getAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href');警报(网址);//但我得到了黑色结果,空警报窗口
正确的用法是 getAttributeNS('http://www.w3.org/1999/xlink', 'href');
I have a construction:
<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>
I want to get pic.jpg
url and I need to begin from the most outer div, not exactly from the source <image>
element:
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
My question is what is the right way to get such kind of attributes from element like SVG and its children?
Because before I tried to do this way and it also worked fine in Chrome (I didn't try other browsers):
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
But when I tried to use getAttributeNS()
I got blank result:
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
The correct usage is getAttributeNS('http://www.w3.org/1999/xlink', 'href');
这篇关于获取 SVG <image> 的“xlink:href"属性在 HTML DOM 中动态使用 JS 的元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!