使用javascript更改IE9中的嵌入式SVG

Question

我試圖使用Javascript的基本DOM操作來更改SVG中的文本節點的內容。

基本上這是我嵌入的SVG：

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 200">
    <text>
        <tspan x="100" y="100" fill="#000000" font-size="10">Name:
            <tspan id="firstName">placeholder</tspan>
        </tspan>
    </text>
</svg>

這是我的javascript片段：

document.querySelector('#firstName').innerHTML = 'Test';

這適用於Chrome。 它在IE9中失敗了。

我已經嘗試使用AJAX將SVG作為字符串獲取，從所述字符串創建一個JQuery元素並在將其添加到DOM之前進行替換，但這也不起作用。 IE9確實設法用占位符文本渲染它，所以我想我可以在從它創建DOM元素之前使用字符串上的正則表達式，但我很樂意避免這種情況。

有趣的是，我可以刪除tspan元素，IE將刪除它。 我還可以通過IE的開發人員工具編輯tspan的內容，並更新圖像。

我似乎無法使用innerHTML或JQuery.html()來更新它。

我在這里創建了一個jsfiddle，試圖改變已經嵌入的DOM，因為這比JQuery方法更容易變成小提琴。 行為是一樣的，所以我猜測底層問題也是一樣的。

如果有人能向我解釋為什么這在IE9中不起作用那會很棒。

Answer 1

SVG不是HTML，這就是innerHTML不起作用的原因。 請改用textContent ：

var text = document.querySelector('#firstName').textContent = 'Test';

Answer 2

這是解決方法，基本上將SVG作為字符串操作，然后將其注入DOM。

var svgStr = ''
    + '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 200">'
    + '  <text>'
    + '    <tspan x="100" y="100" fill="#000000" font-size="10">Name: ##PLACEHOLDER##</tspan>'
    + '  <text>'
    + '</svg>';

svgStr = svgStr.replace('##PLACEHOLDER##', 'Test');
$('body').append(svgStr);

（我顯然沒有在我的代碼中內聯SVG，而是將其作為帶有AJAX請求的資源獲取，但這在某種程度上與此無關，因此省略了它）。

這部作品在IE9，這表現在這里 。

歡迎任何類型的清潔解決方案。