我想在没有任何框架的情况下直接在 JS 中编辑一个 SVG 文件。
基本上我有一个 SVG 主文件,其中应该包含一些子 SVG。
我已经在 Ajax 中检索了这些子项的内容,但我想将它们插入到 SVG 标记中。
比如我新建了一个标签
var svgInclude= document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svgInclude.setAttribute('id', 'include_1');
svgInclude.setAttribute('height', widthVis);
svgInclude.setAttribute('width', widthVis);
svg.appendChild(svgInclude);
当我想插入从此函数检索到的 XML 数据时:
function loadXMLDoc(url, cb) {
var xmlhttp;
if (window.XMLHttpRequest) xmlhttp = new XMLHttpRequest();
else xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) cb(xmlhttp.responseText);
};
xmlhttp.open('GET', url, true);
xmlhttp.send();
}
使用:
loadXMLDoc(host + '/svg/frame_panto_v2.svg', function(xml) {
svgInclude.innerSVG(xml);
});
它不起作用,说 Uncaught TypeError: Object #<SVGSVGElement> has no method 'innerSVG'
.我也试过使用 innerHTML
但我得到了同样的错误。
如何将下载的 SVG 文件“粘贴”到 SVG 标签中?
感谢您的帮助。
最佳答案
使用DOMParser做这个。
var parser = new DOMParser();
var doc = parser.parseFromString(stringContainingXMLSource, "image/svg+xml");
这将为您提供 SVG 文档,您可以使用 doc。 documentElement获取内容和 importNode和 appendChild添加它。
关于Javascript 编辑 SVG,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21933080/