javascript - 无法将 SVG 正确导入 Canvas

Question

我在将 SVG 导入 Canvas 以及将 setZoom() 与 FabricJS 结合使用时遇到问题。我使用的是“2.0.0.rc4”版本。

我一直在尝试使用两种方法导入它们，但每种方法都有不同的问题:

1- loadSVGFromURL

fabric.loadSVGFromURL(src, function(objects, options) {
    let loadedObjects = new fabric.Group(group);
    var obj = fabric.util.groupSVGElements(objects, options);
    canvas.add(obj).renderAll();
});

使用这种方法，一些 SVG 在 Canvas 上加载不正确，但缩放效果很好。

loadSVGFromURL loads the SVG incorrectly

2-新 Fabric .Image

const image = new Image();
image.crossOrigin = "Anonymous";
image.src = src;

let imageObject;

image.onload = () => {
    imageObject = new fabric.Image(image, {
        scaleY: 1,
        scaleX: 1,
        cropX: 0,
        cropY: 0,
        lockUniScaling: true,
        crossOrigin: 'Anonymous'
    });
}

使用这种方法可以正确导入每个 SVG，但是当我尝试在我的应用程序中使用缩放功能时，视框(容器)内的 SVG 形状会独立调整它们的大小，就像它被遮盖、裁剪或剪裁一样。我想这与 preserveAspectRatio 属性有关，但我无法使其工作。

这是我用来设置缩放的方法。该方法适用于 Canvas 和其他对象，但使用上述方法导入的 SVG 除外。

setCanvasZoom(value) {
    // value is from 10 to 500.
    // the zoomFactor will result in an integer from 0.1 to 5

    let zoomFactor = parseInt(value, 10) / 100;

    this.canvas.setZoom(zoomFactor);

    this.canvas.setWidth(this.templateDimensions.width * zoomFactor);
    this.canvas.setHeight(this.templateDimensions.height * zoomFactor);

    this.canvas.renderAll();
}

The shapes are adjusted independently to the container

1. 我使用第一种方法导入 SVG 是否做错了什么？我尝试使用 svgo 优化 SVG，并在 Illustrator 中编辑它们，但没有成功(在 fabricjs/kitchensink 中也加载不正确)。

2. 是否存在使用第二种方法将 SVG 锁定在容器内的方法？我应该使用其他方法来设置缩放吗？

如果您能帮助我解决这些问题，我将不胜感激。

Answer 1

在写这个问题的时候，圆和椭圆的解析确实存在一个错误。圆从 svg 文档继承宽度和高度，覆盖半径值并替换它们。

这里的bug已经修复了， https://github.com/kangax/fabric.js/pull/4637/files#diff-35fc8e842fb0e1e1953d9ba21a292160R189

该错误已在 rc3 和 rc4 之间引入，但现在您可以正常导入路径而无需预处理 SVG，前提是您下载最新版本。