Canvas 将SVG加载为带边框的clipPath-fabricjs

我需要用SVG来划分画布。在我使用clipTo之前，它工作得很好，但是我们已经将Fabric.js的版本更新到2.3.4，clipTo不再工作，建议使用ClipPath。 当使用ClipPath执行此操作时，它会正确地执行此操作，但边框不会绘制它。我们需要划界边以突出显示可编辑区域

我对Fabric 1.6版的结果：

Fabric版本2.3.4和clipPath的结果：

正如您所看到的，它不会绘制边界的边缘，尽管它确实绘制了边界

如何使用新版本的Fabric执行此功能

我有一个有一圈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());