将SVG加载为带边框的clipPath-Fabric.js

Question

我需要用SVG分隔画布。在使用clipTo之前，它可以正常工作，但是我们已经将Fabric.js和clipTo的版本更新为2.3.4，不再起作用，建议使用ClipPath。 当使用ClipPath进行操作时，它可以正确执行操作，但是边框无法绘制。我们需要划定边缘以突出显示可编辑区域。

我使用Fabric 1.6版的结果：

我使用Fabric版本2.3.4和clipPath的结果：

如您所见，它不会绘制限制的边缘，尽管可以。

如何在新版本的Fabric中执行此功能？

我有一个JSFiddle，带有一个clipPath圆，可以进行测试，而无需添加边框。

var canvas = new fabric.Canvas('c');

(function() {
    var clipPath = new fabric.Circle({
        radius: 100,
        top: -200,
        left: -200
    });
    var clipPath2 = new fabric.Circle({
        radius: 100,
        top: 0,
        left: 0
    });
    var clipPath3 = new fabric.Circle({
        radius: 100,
        top: 0,
        left: -200
    });
    var clipPath4 = new fabric.Circle({
        radius: 200,
        top: 15,
        left: 30,
        strokeWidth: 5,
        stroke: "red",
        fill: "#3ff4ff",
        hoverCursor: "pointer",
        opacity: 1,
        selectable: false,
        absolutePositioned: true,
        controlsAboveOverlay: true,
        hasBorders: true,
        borderDashArray: [3, 3],
        borderColor: 'red',
        strokeLineJoin: 'mitter',
        strokeMiterLimit: 3000,
        objectCaching: true,
        affectStroke: true
    });
    canvas.clipPath = clipPath4;
    //canvas.add(clipPath4);
    //var g = new fabric.Group([clipPath, clipPath2, clipPath3]);
    //g.inverted = true;
    fabric.Image.fromURL('http://fabricjs.com/assets/dragon.jpg', function(img) {
        //img.clipPath = g;
        img.scaleToWidth(125);
        img.left = 175;
        img.top = 175;
        canvas.add(img);
    });
    a tag

    canvas.setBackgroundColor("#00CCEE");
    console.log(canvas.ga tagetObjects());
})()
console.log(canvas.getObjects());