d3-celestial 库导出到 SVG

Question

我正在使用 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，但只能获得 Empty SVG。

Answer 1

Fabric.js 不是将面向像素的<canvas> 内容转换为矢量格式的灵丹妙药。只有使用fabric.Canvas 方法绘制的东西才能导出为矢量格式。

它是如何工作的？从 Fabric.js 的角度来看，如果您初始化 Canvas 对象，则该画布是空的。先前绘制的内容将被忽略。如果给fabric.Canvas 对象一个命令，会发生两件事：对HTML <canvas> 元素进行更改，覆盖现有内容，并将更改记录在数据结构中。 .toSVG() 方法只能使用这些数据导出到 SVG。 canvas 元素本身是一个只写输出设备。

简单地重复一遍：<canvas> 元素不包含矢量信息。无论您使用什么库，您可以期望提取的最佳值是这样的：

<svg>
  <image xlink:href="data:image/png;base64....." />
</svg>

数据源是像素图像。

Answer 2

目前我手头没有具体细节，但我正在尝试做同样的事情（来自令人沮丧的不完整的 Make 杂志文章）并且能够通过以下方式强制 SVG：

托管 d3-celestial 的本地实例

修改 HTML 页面以使用实际使用 SVG 的旧 0.4 版本（在 dist 文件夹中）

安装“SVG crowbar”书签以将输出导出到文件。