html图片中加入js,javascript – 如何动态地将SVG图像插入到HTML中？

一般来说,问题有三重的两个方面：

> HTML不是XHTML,在HTML中支持SVG是劣质的,在撰写本文时也不太明确.解决方案是使用一个真正的XHTML文档,其中SVG命名空间的元素实际上被视为SVG.

> responseXML在另一个DOM文档中,通常只能将节点从一个文档移动到另一个文档.您应该使用document.importNode将节点从一个文档导入另一个文档.

>使用onload事件处理程序加载SVG文件将不会通过创建节点或将其附加到文档来调用这些处理程序.脚本块中的代码将被运行,但是,您需要以独立的方式重新编写脚本,并且还可以动态加载脚本.

这是一个简单的例子,适用于Chrome,Safari和Firefox …但不是IE9：

var xhr = new XMLHttpRequest;

xhr.open('get','stirling4.svg',true);

xhr.onreadystatechange = function(){

if (xhr.readyState != 4) return;

var svg = xhr.responseXML.documentElement;

svg = document.importNode(svg,true); // surprisingly optional in these browsers

document.body.appendChild(svg);

};

xhr.send();

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

Fetch and Include SVG in XHTML

编辑2：怀疑,问题是动态添加脚本时onload事件不会触发.这是一个配对的解决方案：

>重写您的脚本以删除onload事件处理程序.相反,信任文档存在.

>重写你的脚本,要求一个全局的svgRoot;如果不存在,请使用document.documentElement.

>当您将SVG导入到文档后,将SVG设置为新的svg元素.

这是代码在行动：

而且,如果我的网站关闭,这里是后代的代码：

脚本created.svg

import_svg_with_script.xhtml

content="application/xhtml+xml;charset=utf-8" />

Fetch and Include Scripted SVG in XHTML