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 here，试图更改已经嵌入的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，如here所示。

欢迎任何类型的清洁解决方案。

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

2 个答案: