JS на SVG - получение innerHTML элемента

Question

Я хотел извлечь некоторые данные из файла SVG.Я знаю, что SVG - это XML, поэтому я подумал, что было бы довольно легко получить данные с помощью JS.

Итак, я хотел получить кучу текста, извлеченного из SVG.Итак, я запустил JS-консоль chrome и попытался кое-что сделать.Мне нужно было получить все 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 не помогает - я не могу найти функцию, которая преобразует ее в строку.

Итак, как можно получить innerHTML объекта SVG через JS?

Answer 1

Выберите элемент, как у вас, но используйте следующее для доступа к его тексту:

var content = a[20].textContent;

Это не замена для innerHTML внутри SVG, но будет работать до тех пор, пока вы только хотите извлечьтекст без разметки.

Answer 2

A Text узел выглядит как строка, когда вы просматриваете ее в консоли, но это не строка.Для строки вы хотите nodeValue.Попробуйте:

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