Fabric.js - インポートしたSVGの色/塗りつぶし/ストロークを変更します

Question

loadSVGFromURLを使用してキャンバスに配置されたファブリック内のSVGの色を変更する方法はありますか？ svgは単なる矢印ですが、塗りつぶしやストロークを設定できない場合はフィルタでこれを行うことはできますか？

$("input:radio[id='arrow']").click(function() { 
fabric.loadSVGFromURL('../scripts/svg/arrow.svg', function(objects) { 
      var group = new fabric.PathGroup(objects, { 
      left: 165, 
      top: 100, 
      width: 295, 
      height: 40, 
      fill: colourSet 
     }); 
     canvas.add(group); 
     canvas.renderAll(); 
      }); 
      }); 

Answer 1

var colorSet = '#00FFFF'; 

$("input:radio[id='arrow']").click(function() { 
    fabric.loadSVGFromURL('../scripts/svg/arrow.svg', function(objects, options) { 
    var shape = fabric.util.groupSVGElements(objects, options); 
    shape.set({ 
     left: 165, 
     top: 100, 
     width: 295, 
     height: 40 
    }); 
    if (shape.isSameColor && shape.isSameColor() || !shape.paths) { 
     shape.setFill(colorSet); 
    } 
    else if (shape.paths) { 
     for (var i = 0; i < shape.paths.length; i++) { 
     shape.paths[i].setFill(colorSet); 
     } 
    } 
    canvas.add(shape); 
    canvas.renderAll(); 
    }); 
}); 

すべてのパスが同じ色を有する場合fabric.PathGroupのファンクションにsetfillのみ動作オブジェクト：

https://github.com/kangax/fabric.js/blob/master/src/path_group.class.js#L99

Answer 2

OBJECT.setFill（ 'FILL_COLOR'）;を使用できます。例えば

rect.setFill('red');