fabric 2.4 toSVG test

fabric 2.4 toSVG test

by uemon

HTML

<script src="https://rawgit.com/fabricjs/fabric.js/master/dist/fabric.min.js"></script>
<canvas id="c1"></canvas>
<button id="toSVG">to SVG</button>  <button id="fromSVG">load from SVG</button>
<canvas id="c2"></canvas>

JavaScript

(function() {
/**
 * fabric.js template for bug reports
 *
 * Please update the name of the jsfiddle (see Fiddle Options).
 * This templates uses latest dev verison of fabric.js (https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js).
 */
 
 
 // initialize fabric canvas and assign to global windows object for debug
 var canvas = new fabric.Canvas('c1',{
  	width:500,
    height:300, 
    backgroundColor: "#ffffff",
  });
  var canvas2 = new fabric.Canvas('c2',{
  	width:500,
    height:300,
    backgroundColor: "#f9fc82"
  });

// ADD YOUR CODE HERE
	var savedata;
	var clipPath = new fabric.Rect({ 
  		width: 100, height:100, top: 100, left: 100, fill: '#aaaaaa', 
      absolutePositioned: true });
  //canvas.add(clipPath);

  fabric.Image.fromURL('http://fabricjs.com/assets/dragon2.jpg', function(img) {
  	var imgInstance = img.set({
    	clipPath:clipPath,
      scaleX: 0.2,
      scaleY:0.2
    })
    canvas.add(imgInstance);
  });
  
  $("#toSVG").on('click', function(){
    savedata = canvas.toSVG();
    console.log(savedata);
  })
  
  $("#fromSVG").on('click', function(){
  	fabric.loadSVGFromString(savedata, function(objects, options) {
  		var obj = fabric.util.groupSVGElements(objects, options);
  		canvas2.add(obj).renderAll();
		});
  })
  
  

})()