如何将SVG图像动态插入HTML？

一般来说，问题是双重的：

1. HTML不是XHTML，在撰写本文时，HTML中对SVG的支持是不完善的，而且定义也很差。解决方案是使用真正的XHTML文档，其中SVG名称空间的元素实际上被视为SVG

2. responseXML位于另一个DOM文档中，通常不能将节点从一个文档移动到另一个文档。您应该使用document.importNode将节点从一个文档导入到另一个文档

3. 使用onload事件处理程序加载SVG文件不会通过创建节点或将其附加到文档中来调用这些处理程序。但是，script块中的代码将被运行，因此您需要以一种独立工作的方式重写脚本，同时也可以使用动态加载

下面是一个在Chrome、Safari和Firefox中工作的简单示例……但不是IE9：

var xhr=new-XMLHttpRequest；
open（'get'，'stirling4.svg'，true）；
xhr.onreadystatechange=函数（）{
如果（xhr.readyState！=4）返回；
var svg=xhr.responseXML.documentElement；
svg=document.importNode（svg，true）；//在这些浏览器中是可选的
document.body.appendChild（svg）；
};
xhr.send（）；

请在此处查看它的实际操作：http://phrogz.net/SVG/import_svg.xhtml

不幸的是，IE9不能正确支持document.importNode。为了解决这个问题，我们编写了自己的cloneToDoc函数，通过递归地对层次结构进行爬网，为任何给定节点创建一个等效结构。下面是一个完整的工作示例：

&lt；html xmlns=”http://www.w3.org/1999/xhtml“xml:lang=“en”&gt&书信电报；头&gt；
&lt；meta-http equiv=“content-type”content=“application/xhtml+xml；charset=utf-8”/&gt；
&lt；标题&gt；在XHTML中获取并包含SVG&lt/标题&gt；
&lt；script type=“text/ecmascript”&gt&书信电报；！[CDATA[
setTimeout（函数（）{
var xhr=新的XMLHttpRequest；
open（'get'，'stirling4.svg'，true）；
xhr.onreadystatechange=函数（）{
如果（xhr.readyState！=4）返回；
var svg=cloneToDoc（xhr.responseXML.documentElement）；
document.body.appendChild（svg）；
};
xhr.send（）；
},1000);
函数cloneToDoc（节点，文档）{
如果（！doc）doc=单据；
var clone=doc.createElements（node.namespaceURI，node.nodeName）；
对于（变量i=0，len=node.attributes.length；i&lt；len；++i）{
var a=节点属性[i]；
如果（/^xmlns\b/.test（a.nodeName））继续；//IE无法创建这些
clone.setAttributeNS（a.namespaceURI、a.nodeName、a.nodeValue）；
}
对于（变量i=0，len=node.childNodes.length；i&lt；len；++i）{
var c=node.childNodes[i]；
clone.insertBefore(
c、 nodeType==1？cloneToDoc（c，doc）：doc.createTextNode（c.nodeValue），
无效的
); }
返回克隆；
}
]]&燃气轮机&lt/脚本&gt；
&lt/头&gt&书信电报；车身&gt&lt/车身&gt&lt/html&gt；

请在此处查看它的实际操作：http://phrogz.net/SVG/import_svg_ie9.xhtml

编辑2:正如所怀疑的，问题在于动态添加脚本时不会触发onload事件。以下是一个有效的配对解决方案：

1. 重写脚本以删除onload事件处理程序。相反，请相信文档存在
2. 重写脚本以请求全局svgRoot；如果它不存在，请使用document.documentElement
3. 获取SVG时，在将其导入文档后，将全局svgRoot设置为新的SVG元素

以下是正在运行的代码：

• 独立脚本SVG：http://phrogz.net/SVG/script-created.svg
• 导入它的IE9友好页面：http://phrogz.net/SVG/import_svg_with_script.xhtml

如果我的网站关闭了，下面是给后代的代码：

脚本已创建。svg

&lt；svg xmlns=”http://www.w3.org/2000/svg“&gt；
&lt；script type=“text/javascript”&gt&书信电报；！[CDATA[
函数createOn（根、名称、a）{
var el=document.createElements（svgNS，name）；
对于（a中的var n）如果（a.hasOwnProperty（n））el.setAttribute（n，a[n]）；
返回root.appendChild（el）；
}
//相信别人的根，以防我们
//导入到另一个文档中
如果（！window.svgRoot）svgRoot=document.documentElement；
var svgNS=svgRoot.namespaceURI；
createOn（svgRoot，'rect'{
x:10，y:10，宽30，高30，
笔划：'#8080ff'，“笔划宽度”：5，
填写：“无”
});
]]&燃气轮机&lt/脚本&gt；
&lt/svg&gt；

使用脚本.xhtml导入svg

&lt；html xmlns=”http://www.w3.org/1999/xhtml“xml:lang=“en”&gt&书信电报；头&gt；
&lt；meta http equiv=“内容类型”
content=“application/xhtml+xml；charset=utf-8”/&gt；
&lt；标题&gt；在XHTML中获取并包含脚本SVG&lt/标题&gt；
&lt；script type=“text/ecmascript”&gt&书信电报；！[CDATA[
setTimeout（函数（）{
var xhr=新的XMLHttpRequest；
open（'get'，'script-created.svg'，true）；
xhr.onreadystatechange=函数（）{
如果（xhr.readyState！=4）返回；
var svg=xhr.responseXML.documentElement；
svg=cloneToDoc（svg）；
window.svgRoot=svg；//供脚本参考
document.body.appendChild（svg）；
删除window.svgRoot；
};
xhr.send（）；
},1000);
函数cloneToDoc（节点，文档）{
如果（！doc）doc=单据；
var clone=doc.createElements（node.namespaceURI，node.nodeName）；
对于（变量i=0，len=node.attributes.length；i&lt；len；++i）{
var a=节点属性[i]；
如果（/^xmlns\b/.test（a.nodeName））继续；//IE无法创建这些
clone.setAttributeNS（a.namespaceURI、a.nodeName、a.nodeValue）；
}
对于（变量i=0，len=node.childNodes.length；i&lt；len；++i）{
var c=node.childNodes[i]；
clone.insertBefore(
c、 nodeType==1？cloneToDoc（c，doc）：doc.createTextNode（c.nodeValue），
无效的
)
}
返回克隆；
}
]]&燃气轮机&lt/脚本&gt；
&lt/头&gt&书信电报；车身&gt&lt/车身&gt&lt/html&gt；