问题描述
我有一个D3JS树,我想将其下载为SVG。如果我使用以下代码并将其解析为用标记替换第一个
$('#download-SVG').click(function() {
var dl = document.createElement('a');
document.body.appendChild(dl); // This line makes it work in Firefox.
dl.setAttribute("href",svgDataURL(svg.node()));
dl.setAttribute("download","test.svg");
dl.click();
});
我将createElement和setAttribute替换为createElementNS和setAttributeNS,如以下代码所示:
$('#download-SVG').click(function() {
var dl = document.createElementNS('http://www.w3.org/2000/svg','svg');
dl.setAttribute('viewBox','-2500 -420 6000 10000');
dl.setAttribute("width","100%");
dl.setAttribute("height","100%");
dl.setAttributeNS('http://www.w3.org/1999/xlink','href',svgDataURL(svg.node()));
document.body.appendChild(dl); // This line makes it work in Firefox.
dl.setAttribute("download","test.svg");
dl.click();
});
function svgDataURL(svg) {
var svgAsXML = (new XMLSerializer).serializetoString(svg);
var dataURL = "data:image/svg+xml," + encodeURIComponent(svgAsXML);
return dataURL;
}
SVG标签已正确插入,但是,如果尝试在Chrome中打开文件,则会出现以下错误:
error on line 1 at column 45779: Namespace prefix xlink for href on svg is not defined
这是由于未声明xmlns。我猜想setArrtibuteNS会做到这一点!
SVG文件的摘录(来自Chrome Inspect):
<svg viewBox="-2500 -420 6000 10000" width="100%" height="100%" xlink:href="data:image/svg+xml,%3Cg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20transform%3D%22translate(700%2C25)scale(.7%2C.7)%22%3E%3Cpath%20class%3D%22link%22%20stroke%3D%22%23ccc% …… 3C%2Fg%3E" download="test.svg"></svg>
我也收到错误消息
custom.js:166 Uncaught TypeError: dl.click is not a function
在原始代码中有效。
对这两种方法的任何解释将不胜感激。
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)