SVG上的JS - 獲取元素的innerHTML

我想從SVG文件中提取一些數據。我知道SVG是XML，所以我認爲用JS哄騙數據很容易。SVG上的JS - 獲取元素的innerHTML

所以，我想從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？

來源

2012-03-07 Manishearth

此外，出於某種原因，原型顯示某些其他內置的函數，通常在HTML中看到（實際上，我需要的）都缺少。太好了 - 現在W3C正在密謀我... – Manishearth 2012-03-07 13:52:33

選擇元素像你有，但使用以下方法來訪問它的文字：

var content = a[20].textContent;

這對於沒有更換innerHTML內SVG，但是隻要你只是想提取文本將工作和無標記。

來源

2012-03-07 13:53:58 Sirko

順便提一下，索引20的意義是什麼？這個指數值永遠不會假設是我假設的任何其他數字？ – 2018-02-16 17:15:35

@NateNeuhaus 20只是指給出的OP代碼。這裏應該選擇第20個''元素。可以是其他的。主要方面是之後使用的屬性（'textContent'）。 – Sirko 2018-02-16 17:53:17

A Text node當您在控制檯中檢查它時看起來像一個字符串，但它不是一個字符串。對於字符串，您需要nodeValue。嘗試：

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

來源

2012-03-07 19:21:41 Phrogz

SVG上的JS - 獲取元素的innerHTML

回答

相關問題