关于SVG的JS - 获取元素的innerHTML

时间:2012-03-07 13:50:36

标签: javascript xml svg

我想从SVG文件中提取一些数据。我知道SVG是XML,所以我认为用JS哄骗数据会很容易。

所以,我想从SVG中获取一堆文本。所以,我启动了chrome的JS控制台,并试着做一些事情。我需要获取数组中的所有tspan元素,提取文本并对其进行分类。

我现在指的是http://upload.wikimedia.org/wikipedia/commons/e/eb/Light_spectrum.svg

所以,我使用a = document.getElementsByTagName('tspan')。现在,我尝试a[20].innerHTML,然后获取undefined。合理;它不是HTML和iirc innerHTML无论如何都是非标准的。

然后我尝试a[20].childNodes[0]并获得"ELF"。好的,那就是我想要的。但是,由于某种原因,此对象被视为字符串,但不能转换为一个。如果我尝试转换它(以便我可以使用matches()indexOf()之类的内容),我会得到"[object Text]"。深入研究Text.prototype没有帮助 - 我找不到任何将其转换为字符串的函数。

那么如何通过JS获取SVG对象的innerHTML?

2 个答案:

答案 0 :(得分:9)

选择您喜欢的元素,但使用以下内容访问其文本:

var content = a[20].textContent;

这不能替代SVG中的innerHTML,但只要您只想提取文本而不进行标记,它就会起作用。

答案 1 :(得分:2)

当您在控制台中检查它时,Text node看起来像一个字符串,但它不是一个字符串。对于字符串,您需要nodeValue。尝试:

document.querySelectorAll('tspan')[20].childNodes[0].nodeValue