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> 

은 내가 SVG로 캔버스 객체에서 데이터를 내보낼 몇 가지 다른 라이브러리를 사용하려고하지만 빈 SVGs를 얻을 수 있었다.

Answer 1

Fabric.js는 픽셀 지향적 인 <canvas> 콘텐츠를 벡터 형식으로 변환하는 마법의 탄환입니다. 그려진 것들만 fabric.Canvas 방법을 사용하여 벡터 형식으로 내보낼 수 있습니다.

어떻게 작동합니까? Fabric.js Perspective에서 Canvas 객체를 초기화하면 해당 캔버스가 비어 있습니다. 이전에 그려진 내용은 단순히 무시됩니다. fabric.Canvas 객체에 명령이 주어지면 두 가지 일이 발생합니다. 변경 내용은 HTML <canvas> 요소로 그려지고 기존 내용을 덮어 쓰며 변경 내용이 데이터 구조에 기록됩니다. 이 데이터 만 .toSVG() SVG로 내보내는 방법으로 사용할 수 있습니다. 캔버스 요소 자체는 쓰기 전용 출력 장치입니다.

분명하게 반복하려면 : <canvas> 요소에는 벡터 정보가 없습니다. 어떤 라이브러리를 사용 하든지 추출 할 수있는 최적 값은 다음과 같습니다.

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

데이터 소스는 픽셀 이미지입니다. 로컬 호스팅

: 나는 순간에 손에 세부 사항이없는,하지만 난합니다 (실망스럽게도 불완전 만들기 잡지 기사에서) 같은 일을하려고하고하여 SVG를 강요 할 수 있었다되었다

Answer 2

D3-하늘

수정 HTML 페이지의 인스턴스는 출력을 파일로 내보내기 (DIST 폴더에) 실제로 SVGs를 사용 이전 0.4 버전

설치 "SVG의 지렛대"북마크를 사용할 수 있습니다.