Fabric.js加载SVG时无法按原有<g>标签分组实现交互的问题求助

各位技术大佬下午好！

我目前碰到一个Fabric.js处理SVG的难题，想请大家帮忙出出主意：

我的需求是让一个包含多个可选择元素的SVG实现交互功能，这个SVG里的元素都是用<g>标签分组的。原本打算用Fabric.js来做，但实际操作时发现，当我把整个SVG加载进去，Fabric.js会直接把它当成一个整体大组，没办法单独选中里面的各个<g>分组元素，完全达不到交互需求。

后来我尝试把每个<g>标签对应的内容拆成独立的SVG文件，再分别用Fabric.js处理，但新的问题又来了：每个拆分出来的分组元素的画布框架尺寸都和原SVG的整体尺寸一样，而且单独加载后，元素的相对位置完全混乱，根本还原不了原来的布局。原SVG里大概有10个这样的分组元素，现在连单个处理都搞不定...

我已经在网上搜了好半天资料，愣是没找到解决办法。不管是单独加载分组还是整体加载，要么就是框架尺寸不对，要么就是位置丢失，实在头疼。有没有朋友遇到过类似的问题，能给我指点一下吗？

备注：内容来源于stack exchange，提问作者Sabi IsAbuDabi