JS trên SVG - nhận được innerHTML của một phần tử

Question

Tôi muốn trích xuất một số dữ liệu từ tệp SVG. Tôi biết rằng SVG là XML, vì vậy tôi nghĩ rằng nó sẽ được khá dễ dàng để dỗ các dữ liệu ra với JS.

Vì vậy, tôi muốn nhận một loạt văn bản được trích xuất từ ​​SVG. Vì vậy, tôi đã kích hoạt giao diện điều khiển JS của chrome và cố gắng thực hiện một số nội dung. Tôi cần lấy tất cả các phần tử tspan trong một mảng, trích xuất văn bản của chúng và phân loại nó.

Tôi đang đề cập đến http://upload.wikimedia.org/wikipedia/commons/e/eb/Light_spectrum.svg vào lúc này.

Vì vậy, tôi sử dụng a = document.getElementsByTagName('tspan'). Bây giờ, tôi thử a[20].innerHTML và nhận được undefined. Hợp lý; nó không phải HTML và iirc innerHTML là anyways tiêu chuẩn.

Sau đó, tôi thử a[20].childNodes[0] và nhận "ELF". OK, đó là điều tôi muốn. Nhưng, vì lý do nào đó, đối tượng này được đối xử như một chuỗi, nhưng không thể chuyển đổi thành một chuỗi. Nếu tôi cố gắng chuyển đổi nó (để tôi có thể sử dụng các công cụ như matches() và indexOf()), tôi nhận được "[object Text]". Việc xóa vào Text.prototype không giúp được gì - tôi không thể tìm thấy bất kỳ hàm nào chuyển đổi nó thành chuỗi.

Vậy làm cách nào để có thể nhận được innerHTML của đối tượng SVG thông qua JS?

Answer 1

Chọn phần tử như bạn có, nhưng sử dụng sau đây để truy cập vào nội dung của nó:

var content = a[20].textContent; 

Đây không phải là sự thay thế cho innerHTML bên SVG, nhưng sẽ làm việc miễn là bạn chỉ muốn trích xuất văn bản và không có đánh dấu.

Answer 2

A Text node trông giống như một chuỗi khi bạn kiểm tra nó trong bảng điều khiển, nhưng nó không phải là một chuỗi. Đối với một chuỗi, bạn muốn nodeValue. Hãy thử:

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