[英]Adding SVG element to HTML element with appendChild - failing in IE9?
I'm loading up an SVG file via a Prototype Ajax Request, adding a class and an id to it, then putting it into a div. 我正在通过原型Ajax请求加载SVG文件,向其中添加一个类和一个id,然后将其放入div中。 My issue comes when adding it to the DOM: 我的问题出现在将其添加到DOM时:
onSuccess: function(response) {
var svgElement = response.responseXML.documentElement;
svgElement.setAttribute("id", "someId");
svgElement.setAttribute("class", "someClass");
// At this point, everything is fine. I can verify that in IE9,
// I have a valid svgElement and the id and class have been correctly set.
var someDiv = $('someDiv');
someDiv.appendChild(svgElement); // This fails in IE9, but works elsewhere!
someDiv.insert(svgElement.xml); // This works in IE9, but fails elsewhere!
}
I'm only concerned with the better browsers of the bunch - IE9 is the lowest I have to worry about here. 我只关心最好的浏览器-IE9是我在这里担心的最低版本。
Any ides what's up? 有什么想法吗? I'm temporarily switching insert methods depending on if I'm in IE or not, but I want to get to the bottom of this and fix it the correct way. 我根据我是否在IE中来临时切换插入方法,但是我想深入了解这个问题并以正确的方式修复它。
I got around the " responseXML being in a different document " issue by simply creating my document new in all cases by using the responseText: 通过使用responseText在所有情况下简单地创建新文档,就解决了“ responseXML位于其他文档中 ”的问题:
onSuccess: function(response) {
var svgDoc;
if (window.DOMParser) {
var domParser = new DOMParser();
svgDoc = domParser.parseFromString(response.responseText, "text/xml");
} else {
svgDoc = new ActiveXObject("Microsoft.XMLDOM");
svgDoc.async = false;
svgDoc.loadXML(response.responseText);
}
var svgElement = svgDoc.documentElement;
}
Way easier and cleaner than importing the document (and all associated issues) if you ask me. 如果您问我,这比导入文档(及所有相关问题)更加轻松和整洁。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.