Javascript Can'；无法将SVG正确导入画布

我在将SVG导入画布和将setZoom（）与FabricJS一起使用时遇到问题。我使用的是版本“2.0.0.rc4”

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

1-加载svgfromurl

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

使用此方法，一些SVG在画布上加载不正确，但缩放效果很好

2-新面料。图片

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，但当我尝试在我的应用程序中使用缩放时，viewbox（容器）中SVG的形状会独立调整其大小，就像被遮罩、裁剪或剪裁一样。我猜是与PreserveSpectRatio属性有关，但我无法让它工作

这是我用来设置缩放的方法。该方法可以正确地用于画布和其他对象，使用前面描述的方法导入的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();
}

使用第一种方法导入SVG是否有问题？我尝试用svgo优化SVG，并在Illustrator中编辑它们，但没有成功（在fabricjs/kitchensink中也没有成功）

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

---

我非常感谢您对这些问题的帮助。

问题在于SVGs文件，

circle

标记被错误地导入FabricJS画布，将对象放置在其他位置，甚至在原始viewBox之外

我在FabricJS Kitchensink中测试了SVG的两个版本：

我曾经处理所有SVGs文件，包括convertShapeToPath选项，参数convertArcs设置为true

{
  "plugins": [
    {"convertShapeToPath": {"convertArcs": true}},
  ]
}

也可以在Illustrator中将基本图形转换为路径，选择对象并创建其复合路径（菜单“对象>复合路径>创建”或“仅创建”）⌘ + 8）

我在GitHub上找不到关于这个问题的问题或堆栈溢出，所以我真的希望这个解决方案能够帮助其他面临同样问题的人

非常感谢FabricJS的开发人员和维护人员所做的出色工作

SVGs文件的GIST：

---

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

这个错误已经在这里修复了，

---

rc3和rc4之间引入了错误，但现在您可以在不预处理SVG的情况下正常导入路径，前提是您下载了最新版本。

发生的事情非常奇怪，获得SVGThank you@AndreaBogazzi会很有帮助，我只回答我的问题。问题在于SVGs文件，

标记被错误地导入画布。将它们转换为

非常有效。我是否应该在GitHub上就此提出一个问题？有一个inport svg问题，它将梯度和圆一起报告。这个标题有误导性。已经修复。如果您可以复制和解释错误，通常会出现问题。谢谢@AndreaBogazzi，我使用的是通过npm安装的2.0.0 rc4版本。npm上还没有