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

Question

我想从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？

Answer 1

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

var content = a[20].textContent;

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

Answer 2

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

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