javascript - How to set width and height of svg in fabricjs? - Stack Overflow

admin管理员组

文章数量:1352172

I am currently having an issue when setting width and height of a svg object in fabricjs. I tried setting it like this

   svg.width = 100;
   svg.height = 100;

But I am not getting the result I expected. It just crops the svg instead of scaling it. So, how can I set its width and height properly?

Any help will be appreciated. Thanks!

I am currently having an issue when setting width and height of a svg object in fabricjs. I tried setting it like this

   svg.width = 100;
   svg.height = 100;

But I am not getting the result I expected. It just crops the svg instead of scaling it. So, how can I set its width and height properly?

Any help will be appreciated. Thanks!

• javascript
• fabricjs

Share Improve this question Follow asked Jun 22, 2017 at 20:00 Dario NegriDario Negri 5311 silver badge33 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

Use scaleToWidth() and scaleToHeight() method to properly set SVG object­*'s* width and height respectively.

:-: working example :-:

var canvas = new fabric.Canvas('fabric-canvas');
fabric.loadSVGFromURL('http://cdn.shopify./s/files/1/0496/1029/files/Freesample.svg?5153', function(objects, options) {
   var svg = fabric.util.groupSVGElements(objects, options);
   svg.left = 50;
   svg.top = 50;
   svg.scaleToWidth(100);
   svg.scaleToHeight(100);
   canvas.add(svg);
   canvas.renderAll();
});

canvas{border:1px solid #ccc}

<script src="https://cdnjs.cloudflare./ajax/libs/fabric.js/1.7.13/fabric.min.js"></script>
<canvas id="fabric-canvas" width="200" height="200"></canvas>

本文标签： javascriptHow to set width and height of svg in fabricjsStack Overflow