CODEWITHSUNDEEP
javascripthtml5-canvasfabricjs
Dan
Dan

Reputation: 329

Get individual objects after svg loaded into canvas

I'm loading svg into canvas and scale it to fit to the canvas. Then I need to access individual objects. Is this possible?

var canvas = new fabric.Canvas('c');
var url = 'http://fabricjs.com/assets/107.svg';
fabric.loadSVGFromURL(url, function(objects, options) {
  var svg = fabric.util.groupSVGElements(objects, options);
  svg.scaleToHeight(canvas.height);
  canvas.add(svg);
  svg.center();
  svg.setCoords();
  canvas.renderAll();
  console.log(svg);
});
fabric.loadSVGFromURL(url, function(objects, options) {
    var group = new fabric.Group(objects,options);
    canvas.add(group);
    group.scaleToHeight(canvas.getHeight());
    group.center();
    canvas.renderAll();
});
<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<canvas id="c" width="500" height="200"></canvas>

Upvotes: 0

Views: 151

Answers (1)

seahorsepip
seahorsepip

Reputation: 4819

Part of fabric js: canvas.toSVG()

Then you can select invidual objects in the generated svg.

Upvotes: 1

Related Questions