我的画布是1000 x 1000,我希望导入的svg是500 x 500但它的svg尺寸是300 x 300(插图画家的画板尺寸)
我如何在这个加载的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>
答案 0 :(得分:9)
您无法更改导入的SVG(pathGroup)的宽度和高度。 Widht和Height由构成SVG本身的未缩放部分定义。您可以做的是加载SVG然后正确缩放它。
scaleToWidth(x)
scaleToHeight(x)