如何封装一个属于自己的Svg

[752337625]

在我的独立开发中，我想分装一些属于自己的功能类型：例如type ：Pipe、Images、Gif、Video、Svg、Echarts等。这样有利于我的组态化渲染。
而我最近在封装Svg的时候继承Group类型代码如下：
import {
classRegistry,
FabricObject,
Group,
loadSVGFromURL,
util,
} from 'fabric';
import { v4 } from 'uuid';

export class SvgClass extends Group {
static override type = 'Svg';
dataSet!: any;
id!: string;
superType = 'Group';
constructor(objects: FabricObject[] = [], options: any) {
super(objects, options);
this.dataSet = options.dataSet;
this.id = v4();
this.loadSvg(options);
}

static override fromObject(object: Record<string, unknown>) {
return new Promise((resolve) => {
resolve(new SvgClass([], object));
});
}
async loadSvg(options: any) {
const {
dataSet: { src },
} = this;
const res = await loadSVGFromURL(src);
const objects = res.objects as FabricObject[];
const createdObj = util.groupSVGElements(objects) as Group;
createdObj.forEachObject((element: FabricObject) => {
this.add(element);
});
this.set({
...options,
snapAngle: 20,
snapThreshold: 3,
});
this.setCoords();
}
}
classRegistry.setClass(SvgClass, 'Svg');

使用：
if (type === 'Svg') {
const svg = new SvgClass([], options);
this.fabricRender.$$.add(svg);
this.fabricRender.$$.setActiveObject(svg);
}
以上切都很正常，但是问题。在做undo和redo的时候会使用loadFromJSON这个函数重写渲染。这时候就会出现异常

我该怎么办，希望可以帮帮我