javascript - Internet Explorer 9 中的类型不匹配错误 : adding a <title> to inline SVG

Question

我正在尝试使用 Javascript 动态地在内联 SVG 中添加一个元素。我有一个脚本适用于除 IE 之外的所有主要浏览器，在 IE 中我收到了 Type mismatch 错误。代码看起来像这样:

var svg = new XMLHttpRequest();
svg.open("GET", "image.svg", false);
svg.send();

var svgResult = svg.responseXML;

var theSVG = svgResult.getElementsByTagName('svg')[0];
    titleElement = document.createElementNS('http://www.w3.org/2000/svg', 'title'),
    titleContent = document.createTextNode("The <title> text");

titleElement.appendChild(titleContent);
theSVG.insertBefore(titleElement, theSVG.firstChild);

我希望能提供一些上下文，这个片段是一个更大的脚本的一部分，该脚本获取图像的源并将 SVG 代码输出到页面上。由于脚本工作正常并且在 IE 以外的任何浏览器中都不会返回任何错误，所以我有点不知所措。

感谢任何帮助。

注意:我应该补充一点，IE 告诉我最后一行 (insertBefore) 是不匹配错误所在的行。

Answer 1

1. 您的代码似乎在 IE10+ 中运行良好
2. IE9(或者可能是兼容模式？)的问题在于，当它使用 ajax 接收 SVG 时，它使用“旧”文档模式解析 SVG。您可以尝试像那样解决它。也许有更好的方法，不确定。

var svg = new XMLHttpRequest();
svg.open("GET", "image.svg", false);
svg.send();

// svgResult = svg.responseXML;  <<<< this seems to be the problem

// begin of workaround
            
var svgText = svg.responseText;
parser = new DOMParser();
var svgResult = parser.parseFromString(svgText, "text/xml");

// end of workaround

var theSVG = svgResult.getElementsByTagName('svg')[0];
titleElement = document.createElementNS('http://www.w3.org/2000/svg', 'title'),
titleContent = document.createTextNode("The <title> text");

titleElement.appendChild(titleContent);
theSVG.insertBefore(titleElement, theSVG.firstChild);