svg - FabricJS - 设置导入的 svg 的高度和宽度

Question

我的 Canvas 为 1000 x 1000，我希望导入的 svg 为 500 x 500，但它的 svg 大小为 300 x 300(illustrator 中画板的大小)

如何在这个加载的 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>

Answer 1

您无法更改导入的 SVG ( pathGroup ) 的宽度和高度。宽度和高度由构成 SVG 本身的未缩放部分定义。您可以做的是加载 SVG，然后正确缩放它。

scaleToWidth(x)
scaleToHeight(x)