javascript - Fabric JS loadSVGFromString 包括使用定义的自定义属性

Question

我有一个像这样的 SVG 字符串

<svg ...> <image id="Lager_1" data-name="Lager 1" width="2" height="3" xlink:href="data:image/png;base..." y="0" x="0" x_rel="0" y_rel="0" width_rel="0.2" height_rel="0.2" obj_id="0f83a8ca168e" comp_id="2c46c64a13c0"/> ...

我添加了一些额外的属性，例如x_rel, y_rel,obj_id和comp_id. 但是，一旦我尝试使用 FabricJS 将这个 SVG 加载到画布上，loadSVGFromString如下所示：

fabric.loadSVGFromString(svg, (objects, options) => {
    objects.forEach(obj => {
      console.log(obj)
      canvas.add(obj)
    })

然后像这样输出画布的内容 console.log(canvas) 或 console.log(canvas.toObject())

我看到我的自定义属性已丢失且不再包含在内，是否有解决方案？

标签： javascriptreactjsfabricjs

Answer 1

您需要添加使用该groupSVGElements函数传入的选项变量：

...
var obj = fabric.util.groupSVGElements(objects, options);
...
canvas.add(obj);