svg 컨테이너를 .svg 파일로 저장하는 툴킷이없는 방법?

-2

나는 d3.js를 사용하고 본질적으로 상호 작용하는 동적 그래프를 플로팅하고있다. 모든 것이 svg 컨테이너에 저장되고 있습니다. 이제는 그 컨테이너를 .svg 또는 .png 파일로 저장하고 싶습니다.이 컨테이너는 corelDraw 등의 소프트웨어에서 편집 할 수 있습니다. 나는 많은 것을 온라인으로 훑어 보아서 온라인으로 보려고 노력했지만 아무 것도 이해할 수 없었다. 어떤 방향으로 어떤 도움을 주시면 감사하겠습니다. 당신에게 업데이트 감사 - @Jaco을, 당신이 제안 여기 샘플 코드를 삽입.svg 컨테이너를 .svg 파일로 저장하는 툴킷이없는 방법?

<!DOCTYPE html> 
<meta charset="utf-8"> 
<style> 
</style> 
<body> 
<script src="d3.js"></script>//I'm using the d3 library source code locally 
<script>//code here which reads a json file (local) and shows a graph when opened in browser, part of it is here where I declare svg and keep appending the stuff to it for drawing. 
var svg = d3.select("body").append("svg") 
.attr("width", width) 
.attr("height", height); 
//here I append circles to the svg and texts (labels) and links 
//some functions are declare to control the behaviour 
//nodes are appended as circles (one class) 
</script> //I use the id as svg

출처

2017-02-28 Dharm Skandh

SVG를 저장할 수있는 기본 예제는 아래를 참조하십시오. 스타일을 추가 한 경우 스타일을 처리해야합니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="svg-container"></div> 
 
<button id="svg-save" type="button">Save</button> 
 
<script> 
 
    $(document).ready(function() { 
 
    var width = 100; 
 
    var height = 100; 
 
    var svg = d3.select("#svg-container").append("svg") 
 
     .attr("width", width) 
 
     .attr("height", height); 
 

 
    var circle = svg.append("circle") 
 
     .attr("cx", 30) 
 
     .attr("cy", 30) 
 
     .attr("r", 20) 
 
     .attr("fill","red") 
 
    }); 
 
    
 
    $('#svg-save').click(function() { 
 
    var svg = document.getElementById('svg-container'); 
 
    //you need to clone your SVG otherwise it will disappear after saving 
 
    var clone = svg.cloneNode(true); 
 
    var svgDocType = document.implementation.createDocumentType('svg', "-//W3C//DTD SVG 1.1//EN", "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"); 
 
    var svgDoc = document.implementation.createDocument('http://www.w3.org/2000/svg', 'svg', svgDocType); 
 

 
    svgDoc.replaceChild(clone, svgDoc.documentElement); 
 
    var svgData = (new XMLSerializer()).serializeToString(svgDoc); 
 
    var a = document.createElement('a'); 
 
    a.href = 'data:image/svg+xml; charset=utf8, ' + encodeURIComponent(svgData.replace(/></g, '>\n\r<')); 
 
    a.download = 'downloaded.svg'; 
 
    a.innerHTML = 'download the svg file'; 
 

 
    //Hack alert: create a temporary link to download the svg 
 
    document.body.appendChild(a); 
 
    a.click(); 
 
    document.body.removeChild(a); 
 

 
}); 
 
</script>

출처

2017-02-28 10:18:22 Jaco

대답을 주셔서 감사합니다 그리고 나는 그것의 약간을 얻을 수 있지만, 어떻게이 정확히 작동합니까. 마찬가지로, 여기에서 자바 스크립트를 사용하여 코딩 한 HTML 파일을 어디에 지정해야합니까? 아니면이 코드가 제 코드로 들어갈 수 있습니까? –

이 예에서는'svg-container'와 동일한'id'를 사용하여 svg 컨테이너의 내용을 잡고 독립 실행 형 SVG 파일로 다시 포맷합니다. 코드의 단순화 된 버전을 게시 한 경우 유용했을 것입니다, 당신은 아마 downvotes 덜 얻었을 것입니다. – Jaco

안녕하세요 @Jaco, 사과하고 샘플 코드를 여기에 붙여 넣었습니다. 내가 D3를 사용하는 코드를 적응 –

svg 컨테이너를 .svg 파일로 저장하는 툴킷이없는 방법?

답변

관련 문제