Fabric.js에서 SVG 가져 오기가 올바르게 작동하지 않습니다.

Question

SVG 모양을 만들고 데이터베이스로 내보내는 중입니다. 이것에 대한 jsfiddle은 여기에 - http://jsfiddle.net/rafi_ccj/MASeK/1/

그리고 코드는 아래와 같습니다.

HTML 부분 :

<button id="make_svg">toSVG</button> 
<div id="canvas-wrapper"> 
    <canvas id="canvas" width="400px" height="200px"></canvas> 
</div> 

자바 스크립트 부분 :

var canvas = new fabric.Canvas('canvas'); 


canvas.add(new fabric.Rect({ 
    left: 100, 
    top: 100, 
    angle: 0, 
    fill: 'rgba(23,23,125,0.5)', 
    strokeWidth: 0.1, 
    stroke: '#FF0000', 
    width: 200, 
    height: 200, 
    opacity: 1 
})); 
canvas.add(new fabric.Circle({ 
    left: 100, 
    top: 100, 
    fill: 'rgba(45, 255, 34, 0.5)', 
    strokeWidth: 0.1, 
    stroke: '#FF0000', 
    radius: 100, 
    opacity: 1 
})); 

$("#make_svg").click(function() { 
    canvas_data = canvas.toSVG(); 
    console.log(canvas_data); 
}); 

하고 난 캔버스에 그 SVG를 수입하고 있지만, 내가 창조 하셨 는가 동일하지 않습니다. 일부는 여기에 자바 스크립트

HTML 부분

<div id="canvas-wrapper"> 
    <canvas id="canvas" width="900px" height="800px"></canvas> 
</div> 

--- http://jsfiddle.net/rafi_ccj/2vtz2/

및 코드는 다음과 같습니다 - - jsfiddle은 여기

var canvas = new fabric.Canvas('canvas'); 

var canvas_data = '<?xml version="1.0" standalone="no" ?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="400" height="200" xml:space="preserve"><desc>Created with Fabric.js 1.1.8</desc><defs></defs><rect x="-100" y="-100" rx="0" ry="0" width="200" height="200" style="stroke: #FF0000; stroke-width: 0.1; stroke-dasharray: ; fill: rgba(23,23,125,0.5); opacity: 1;" transform="translate(100 100)"/><circle cx="0" cy="0" r="100" style="stroke: #FF0000; stroke-width: 0.1; stroke-dasharray: ; fill: rgba(45, 255, 34, 0.5); opacity: 1;" transform="translate(100 100)"/></svg> '; 

fabric.loadSVGFromString(canvas_data, function (objects, options) { 
    var loadedObject = fabric.util.groupSVGElements(objects, options); 

    loadedObject.set({ 
     left: 400, 
     top: 200 
    }); 
    loadedObject.setCoords(); 
    canvas.add(loadedObject); 
    canvas.calcOffset(); 
}); 

나는 또한 것을 눈치 챘을 경우 전 삼각형을 사용합니다. 가져온 후에는 존재하지 않습니다. 그냥 사라졌습니다.

누구든지이 문제를 도와 줄 수 있습니까?

Answer 1

모든 개체를 그룹 요소로 만들어이 문제를 해결했으며 캔버스에 이러한 개체가있는 그룹을 만든 후에 장치에 svg 확장자와 함께 데이터베이스에 json 형식으로 저장했습니다. 아래 코드는

var group = new fabric.Group([],{ 
     left: 200, 
     top: 200 
}); 

var canvas_item = canvas.item(0), x = 0; 
while (canvas_item != undefined) { 
     group.addWithUpdate(canvas_item); 
     x += 1; 
     canvas_item = canvas.item(x); 
} 
canvas.clear(); 
canvas.add(group); 
//then use canvas.toDatalessJSON(); and save it to database. while importing this data //use following codes 

var canvas_data = JSON.stringify(canvas.toDatalessJSON()); 

canvasJSONdata = JSON.stringify(canvas.toDatalessJSON()); 
var stringifiedCanvasJSONdata = JSON.parse(canvasJSONdata,''); 
var base_64 = canvas.toDataURL('png'); 

이며 이제는 완벽하게 작동합니다. 비록 내가 많은 문제에 직면했지만, 나는 많이 배웠고, 나는 그것을 즐겼다! 희망이 솔루션은 언젠가 누군가를 도울 것입니다.