如何將SVG放入Fabric.js中的父對象

Question

如何在Fabric.js loadSVGFromString方法中設置SVG大小？ 我找不到適合父對象的解決方案（groupSVGElements）。還檢查了文檔，但在任何地方，我只是看到他們總是使用SVG尺寸的畫布大小。

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

Answer 1

因爲，當前的SVG元素不包含任何寬度和高度屬性，你需要使用viewBox.baseVal.width和viewBox.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