svg-from-url is not positioned or displayed

[alukos]

I use this component because I need an inline svg, since the img tag is not suitable.

To Reproduce

https://codesandbox.io/s/vue-fabric-wrapper-svg-from-url-issue-135-zfvt1?file=/src/App.vue

Screenshots

after clicking near left:0, top:0 svg is displayed, but not in left:200, top:200

Attempt 1.

I try to add in callback of loadSVGFromURL at https://github.com/bensladden/vue-fabric-wrapper/blob/9c7728365ffe281d056cf254d510f44ff9097cb5/src/components/FabricSVGFromURL.vue#L89

      this.fabric.loadSVGFromURL(this.url, async (objs) => {
        this.objs = objs;

        await this.$nextTick(); // after the FabricPath-s from this.objs are ready
        this.groupProps.left = this.$attrs.left;
        this.groupProps.top = this.$attrs.top;
        this.canvas.renderAll();
      });

After this svg is positioned and displayed but not clickable. Its clickable area at (0,0).

Attempt 2.

And I tried to rewrite the FabricSVGFromURL component without using the FabricGroup, FabricPath components. Something like

    async createSVG() {
      await this.$nextTick();
      const group = new this.fabric.Group([]);
      this.canvas.add(group);
      this.fabric.loadSVGFromURL(
        "https://raw.githubusercontent.com/fabricjs/fabricjs.com/gh-pages/assets/15.svg",
        (objects, options) => {
          objects.forEach((o) => group.addWithUpdate(o, options));

          group.scale(0.6).set({ left: 200, top: 150 }).setCoords();
          this.canvas.renderAll();
        }
      );
    },

But the problem was not solved

[saibottob]

Hello all,

I'm facing currently the same issue. Any hope that this issue will be resolved?

Many thanks :)