fabric.js가 SVG로 내보내기하지 않습니다.

Question

SVG에 캔버스를 저장하려고합니다 (포함 된 텍스트 및 SVG).

console.log (캔버스)를했는데 모든 개체가 있습니다. 텍스트 만 내보내고 svg 만 내보내려고해도 여전히 작동하지 않습니다.

콘솔 쇼 :

<?xml version="1.0" encoding="UTF-8" standalone="no" ?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 

이 Fabric.js 1.4.0

// Obtain a canvas drawing surface from fabric.js 
     var canvas = new fabric.Canvas('c'); 
     canvas.setHeight(500); 
     canvas.setWidth(800); 

     canvas.on('object:selected', function(e){ 
      console.log("sdfsdf"); 
     }) 

     // Create a text object. 
     // Does not display it-the canvas doesn't 
     // know about it yet. 
     var hi = new fabric.Text('random text', { 
      fontFamily: "agero", 
      left: canvas.getWidth()/2, 
      top: canvas.getHeight()/2  
     }); 

     var hi2 = new fabric.Text('helo', { 
      fontFamily: "error404", 
      left: 0, 
      top: 0  
     }); 

     // Attach it to the canvas object 


     setTimeout(function() { 
      canvas.add(hi); 
      canvas.add(hi2); 
     }, 500); 


     fabric.loadSVGFromURL('svg/1000.svg', function(objects, options) { 
      var obj = fabric.util.groupSVGElements(objects, options); 


      // ...any code for special handling of the loaded object 


      // put object on the canvas 
      canvas.add(obj); 
     }); 



     console.log(canvas.toSVG()); 

하여 만든 모든 도움을 주셔서 감사합니다.

Answer 1

settimeout을 제거하고 객체 directlly를 캔버스에 추가하면 추가 된 객체 으로 캔버스의 svg를 얻거나 settimeout 함수 (다음으로)에서 console.log 문을 이동하는 것보다 settimeout이 필요한 경우. 당신은 귀하의 요구 사항에 따라 출력을 얻을 것이다.

setTimeout(function() { 
     canvas.add(hi); 
     canvas.add(hi2); 
     console.log(canvas.toSVG()); 
    }, 500); 

Answer 2

ID를 사용하여 div를 만들고 Javascript에서는 이것을 호출하십시오.

document.getElementById('YOUR ID').innerHTML=canvas.toSVG();