在fabricjs中克隆svg时出错

Question

I am trying to clone several svgs from the same data, but when I apply a colour to one of them it also applies to the others as well. I'm not sure I am cloning the svg correctly. Here is my code:

 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); 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"); } else{ 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> 

Answer 1

I think you were just cloning the objects incorrectly.

 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>