如何在Fabric.js

时间:2017-04-04 14:35:26

标签: javascript canvas svg fabricjs

如何在Fabric.js loadSVGFromString方法中设置SVG大小? 我找不到适合父对象的任何解决方案(groupSVGElements)。还检查了文档,但我看到他们总是使用尺寸有SVG的画布尺寸。

示例:http://codepen.io/bajzarpa/pen/wJOOdB?editors=1010

1 个答案:

答案 0 :(得分:1)

由于您当前的SVG元素不包含任何宽度 height 属性,因此您需要使用viewBox.baseVal.widthviewBox.baseVal.height来分别得到它的宽度高度,并相应地设置它以适合父对象。

// get the svg's width and height
let svg = document.querySelector('#testvg');
let svgWidth = svg.viewBox.baseVal.width;
let svgHeight = svg.viewBox.baseVal.height;

// set to fit into a parent object (canvas)
graphic.set({
    top: 5,
    left: 5,
    width: svgWidth,
    height: svgHeight,
    scaleX: (canvas.width - 10) / svgWidth,
    scaleY: (canvas.height - 10) / svgHeight
 });

WORKING DEMO on CodePen