Javascript FabricJs-SVG对象的剪裁区域

我对FabricJS对象有问题。我想创建一个剪辑区域svg对象，它将剪辑加载的图像

我在加载的图像上使用clipTo方法将其传递到剪切区域shape object SVG，但它不起作用，因为SVG不是FabricJS意义上的shape object。有没有办法将加载的SVG转换为FabricJS形状，如多边形或矩形

如果我使用以下方法，效果几乎不错：

globalCompositeOperation = 'source-atop' 

在加载的图像和删除clipTo功能，但如果我将移动/调整大小/旋转图像，它会重叠主剪辑区域的边界最大的矩形。图像不应与灰色矩形以外的其他对象交互，尤其是与主剪裁区域。 也许有办法通过玩globalCompositeOperation来实现这一点

我将非常感谢任何提示

以下是我的问题：

在这里，几乎可以使用源代码的版本：

---

我通过将SVG形状组合成一条没有任何多边形和任何其他SVG对象的路径来解决问题，然后将SVG坐标传递到FabirJS路径。有效的SVG坐标看起来像M0，0H63.7V63.7H0Z

fabric.loadSVGFromURL('object.svg', function (objects, options) {
            let img1 = new fabric.Path(objects[0].d, {
                fill: '#333',
                opacity: 1,
                hasBorders: true,
                hasControls: true,
                hasRotatingPoint: true,
                selectable: true,
                preserveObjectStacking: true,
                objectCaching: false,
            });
     }

我希望它能帮助其他人：

fabric.loadSVGFromURL('object.svg', function (objects, options) {
            let img1 = new fabric.Path(objects[0].d, {
                fill: '#333',
                opacity: 1,
                hasBorders: true,
                hasControls: true,
                hasRotatingPoint: true,
                selectable: true,
                preserveObjectStacking: true,
                objectCaching: false,
            });
     }