FabricJS - 가져온 svg의 높이와 너비 설정

내 캔버스는 1000 x 1000이고 가져온 svg는 500 x 500이 되겠지만 svg 크기는 300 x 300입니다 (일러스트 레이터에서 아트 보드 크기)FabricJS - 가져온 svg의 높이와 너비 설정

이로드 된 svg에서 object.setHeight(400)은 어떻게 만듭니 까? 내가 그런 것을 할 때, 선택 상자는 패딩되거나 오브젝트와 오정렬됩니다.

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의 높이와 너비 설정

답변

관련 문제