ファブリック内でsvgをクローン化するとエラーが発生する

Question

同じデータから複数のsvgをクローンしようとしていますが、そのうちの1つに色を適用すると他のものにも適用されます。私はSVGを正しくクローニングしているかどうかはわかりません。ここに私のコードは次のとおりです。

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

 
var svgObject = null; 
 

 
fabric.loadSVGFromURL("http://fabricjs.com/assets/131.svg", function(objects, options) { 
 

 
    svgObject = fabric.util.groupSVGElements(objects, options); \t \t \t \t \t \t \t 
 

 
    var object1 = fabric.util.object.clone(svgObject); 
 

 
    colourSVG(object1, "rgb(0,0,0)", "rgba(151,0,0,1)"); 
 

 
    canvas.add(object1); 
 

 
    var object2 = fabric.util.object.clone(svgObject); 
 
    object2.top = 200; 
 
    canvas.add(object2).renderAll(); 
 

 
}); 
 

 
function colourSVG(_obj, _keyColourString, _fillColourString){ 
 

 
    if (!_obj.paths) { 
 
    _obj.setFill(_fillColourString); 
 
    } 
 
    else if (_obj.paths) { 
 
    for (var i = 0; i < _obj.paths.length; i++) { 
 

 
     if(_obj.paths[i].fill === _keyColourString){ 
 
     _obj.paths[i].setFill(_fillColourString); 
 

 
     console.log("colour found"); \t \t \t \t \t \t \t \t 
 
     } \t \t \t \t \t \t 
 
     else{ 
 

 
     console.log(_obj.paths[i].fill); 
 
     } 
 
    } 
 
    } \t 
 
}

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script> 
 

 
<canvas id="canvas" width="800" height="500" ></canvas> \t

Answer 1

私はあなただけで間違ってオブジェクトをクローニングしたと思います。

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

 
var svgObject = null; 
 

 
fabric.loadSVGFromURL("http://fabricjs.com/assets/131.svg", function(objects, options) { 
 

 
    svgObject = fabric.util.groupSVGElements(objects, options); 
 
    
 
    svgObject.clone(function(o) { 
 
    colourSVG(o, "rgb(0,0,0)", "rgba(151,0,0,1)"); 
 
    canvas.add(o); 
 
    }); 
 
    svgObject.clone(function(o) { 
 
    o.top = 200; 
 
    canvas.add(o); 
 
    }); 
 
    canvas.renderAll(); 
 

 
}); 
 

 
function colourSVG(_obj, _keyColourString, _fillColourString) { 
 

 
    if (!_obj.paths) { 
 
    _obj.setFill(_fillColourString); 
 
    } else if (_obj.paths) { 
 
    for (var i = 0; i < _obj.paths.length; i++) { 
 

 
     if (_obj.paths[i].fill === _keyColourString) { 
 
     _obj.paths[i].setFill(_fillColourString); 
 

 
     console.log("colour found"); 
 
     } else { 
 

 
     console.log(_obj); 
 
     console.log(_obj.paths[i].fill); 
 
     } 
 
    } 
 
    } 
 
}

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script> 
 

 
<canvas id="canvas" width="800" height="500"></canvas>