JS en SVG - obtener innerHTML de un elemento

Question

Quería extraer algunos datos de un archivo SVG. Sé que SVG es XML, así que pensé que sería muy fácil extraer los datos con JS.

Por lo tanto, quería obtener un montón de texto extraído de un SVG. Entonces, encendí la consola JS de Chrome y traté de hacer algunas cosas. Necesitaba obtener todos los elementos tspan en una matriz, extraer su texto y categorizarlo.

Me estoy refiriendo a http://upload.wikimedia.org/wikipedia/commons/e/eb/Light_spectrum.svg en este momento.

Entonces, yo uso a = document.getElementsByTagName('tspan'). Ahora, intento a[20].innerHTML, y obtengo undefined. Razonable; no es HTML y iirc innerHTML es de todos modos no estándar.

Luego intento a[20].childNodes[0] y obtengo "ELF". OK, eso es lo que quería. Pero, por alguna razón, este objeto se trata como una cadena, pero no se puede convertir en uno. Si trato de convertirlo (para que pueda usar cosas como matches() y indexOf()), obtengo "[object Text]". Profundizar en Text.prototype no ayuda; no encuentro ninguna función que lo convierta en una cadena.

Entonces, ¿cómo se puede obtener el innerHTML de un objeto SVG a través de JS?

Answer 1

Seleccione el elemento como el que tiene, pero usar lo siguiente para acceder a su texto:

var content = a[20].textContent; 

Esto no es un sustituto de innerHTML dentro de SVG, pero trabajará todo el tiempo que sólo desea extraer texto y no hay margen.

Answer 2

A Text node parece una cadena cuando la inspecciona en la consola, pero no es una cadena. Para una cadena, desea nodeValue. Proveedores:

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