D3-天文库导出到SVG
我正在使用D3-Celestial (https://github.com/ofrohn/d3-celestial)并尝试将画布图像转换为SVG (我需要将其用作矢量图像，以便可以将其转换为用于激光切割器的GCode )。我尝试使用Fabric JS库和Canvas-GetSVG，但没有成功。
有没有人有一个好的起点或者简单的方法呢？
<div style="overflow:hidden;"><div id="celestial-map"></div></div>
<div id="celestial-form"></div>
<script type="text/javascript">
var canvas;
Celestial.display({
form: true,
location: true,
datapath: "../data/",
stars: {proper: true}
});
document.getElementById("celestial-map").firstChild.setAttribute("id", "findthisstring");
function myFunction(){
var canvas = new fabric.Canvas('findthisstring', { isDrawingMode: true });
canvas.isDrawingMode = false;
canvas.toSVG();
}
function do_save() {
var canvas = new fabric.Canvas('findthisstring', { isDrawingMode: true });
canvas.isDrawingMode = false;
var filedata=canvas.toSVG(); // the SVG file is now in filedata
var locfile = new Blob([filedata], {type: "image/svg+xml;charset=utf-8"});
var locfilesrc = URL.createObjectURL(locfile);//mylocfile);
var dwn = document.getElementById('dwn');
dwn.innerHTML = "<a href=" + locfilesrc + "
download='mysvg.svg'>Download</a>";
}
</script>
<button onclick="myFunction()">Click me</button>
<input type="button" id="saveBtn" value="save" onclick="do_save()"></input>
<div id='dwn'></div>
<div id="imgOut"></div>我尝试使用几个不同的库将数据从Canvas对象导出到SVG，但只能得到空的SVG。
回答 2
Stack Overflow用户
发布于 2017-12-02 04:10:47
Fabric.js不是将面向像素的<canvas>内容转换为矢量格式的灵丹妙药。只有使用using**fabric.Canvas** methods绘制的内容才能导出为矢量格式。
这是如何工作的呢？从Fabric.js的角度来看，如果初始化一个画布对象，则该画布是空的。之前绘制的内容将被忽略。如果给fabric.Canvas对象一个命令，就会发生两件事:绘制对HTML <canvas>元素的更改，覆盖现有内容，并将更改记录在数据结构中。只有这些数据才能被.toSVG()方法用于导出到SVG。画布元素本身是一个只写输出设备。
简单地重复一下：<canvas>元素不包含矢量信息。无论您使用的是什么库，您期望提取的最佳结果是这样的：
<svg>
<image xlink:href="data:image/png;base64....." />
</svg>其中数据源是像素图像。
Stack Overflow用户
发布于 2017-12-05 02:11:15
目前我手头没有具体信息，但我也在尝试做同样的事情(来自Make杂志上令人沮丧的不完整的文章)，并能够通过以下方式强制使用SVG：
托管d3-celestial的本地实例
修改HTML页面以使用较早的0.4版本，该版本实际上使用SVG(在dist文件夹中)
安装"SVG crowbar“bookmarklet将输出导出到文件。
https://stackoverflow.com/questions/47598880
复制相似问题
腾讯云开发者
