如何将 SVG 放入 Fabric.js 中的父对象答案

【问题标题】：How to fit SVG into parent object in Fabric.js如何将 SVG 放入 Fabric.js 中的父对象
【发布时间】：2017-08-29 20:01:42
【问题描述】：

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

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

【问题讨论】：

标签： javascript canvas svg fabricjs

【解决方案1】：

由于您当前的 SVG 元素不包含任何 width 和 height 属性，因此您需要使用 viewBox.baseVal.width 和 viewBox.baseVal.height 来获取它的 width 和 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

【讨论】：

我想要的与您的解决方案相反。我想将 SVG 文件缩小为固定大小的画布。抱歉，如果最初的问题不清楚。