FabricJS - 設置導入的svg的高度和寬度

我的畫布是1000 x 1000，我想要導入的svg爲500 x 500，但它的svg大小爲300 x 300（插圖中畫板的大小）FabricJS - 設置導入的svg的高度和寬度

我怎樣才能object.setHeight(400)在這個加載的SVG？當我做這樣的事情時，選擇框會結束填充或與對象錯位。

addShapeObject = function(canvas, element, scope) { 
    loadingElementIds.push(element.id); 
    fabric.loadSVGFromURL('/lib/svg/' + element.filename + '.svg', function(objects, options) { 
     var object = fabric.util.groupSVGElements(objects, options); 
     object.top = element.top; 
     object.left = element.left; 


     object.rotatingPointOffset = 20; 
     object.scaleY = element.height/object.height; 
     object.scaleX = element.width/object.width; 

     object.padding = 5; 

     canvas.add(object).renderAll(); 
     sortObjects(canvas); 
     setObjectsZoom(canvas, scope); 
    }); 
},

例SVG：

<?xml version="1.0" encoding="utf-8"?> 
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [ 
    <!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/"> 
    <!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/"> 
    <!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/"> 
    <!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/"> 
]> 
<svg version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;" 
    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" 
    x="0px" y="0px" width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve"> 
<path fill="#010101" d="M150.001,6.515c-5.545,0-10.147,3.733-11.581,8.84l-29.384,90.766h-96.49 
    c-6.664,0-11.952,5.793-11.952,12.512c0,4.109,2.054,7.781,5.167,9.963c1.927,1.307,77.938,56.835,77.938,56.835 
    S54.507,275.08,53.94,276.509c-0.432,1.306-0.742,2.742-0.742,4.229c0,6.726,5.412,12.141,12.075,12.141 
    c2.553,0,4.917-0.809,6.912-2.176l77.816-56.655c0,0,76.073,55.408,77.817,56.655c1.986,1.367,4.358,2.176,6.906,2.176 
    c6.662,0,12.078-5.477,12.078-12.141c0-1.487-0.308-2.924-0.748-4.229c-0.56-1.429-29.752-91.077-29.752-91.077 
    s76.006-55.529,77.938-56.835c3.113-2.182,5.166-5.854,5.166-10.024c0-6.657-5.166-12.45-11.83-12.45h-96.488l-29.512-90.766 
    C160.15,10.249,155.537,6.515,150.001,6.515z"/> 
<path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M74.5,83.5"/> 
</svg>

來源

2013-10-24 Michael J. Calkins

不能改變寬度和高度的進口SVG（路徑組）的。 Widht和Height由構成SVG本身的未縮放的部分定義。你可以做的是加載SVG，然後適當調整。

scaleToWidth(x) 
scaleToHeight(x)

來源

2014-04-13 21:28:02 AndreaBogazzi

FabricJS - 設置導入的svg的高度和寬度

回答

相關問題