在fabricjs中克隆svg时出错答案

【问题标题】：Error when cloning svg in fabricjs在fabricjs中克隆svg时出错
【发布时间】：2017-01-28 03:22:14
【问题描述】：

我试图从相同的数据中克隆几个 svg，但是当我将颜色应用于其中一个时，它也适用于其他的。我不确定我是否正确克隆了 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);							

  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>

【问题讨论】：

你不想在克隆后通过colourSVG 函数传递它吗？也许我对在这个初始示例代码之后何时/如何设置颜色感到困惑？

标签： javascript svg fabricjs

【解决方案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>

【讨论】：