Fabric.js - zmiana koloru/wypełnienia/suwu importowanego svg

Question

Czy istnieje sposób na zmianę koloru svg w tkaninie umieszczonej na płótnie za pomocą loadSVGFromURL? Svg jest po prostu strzałką, jeśli nie mogę ustawić wypełnienia lub obrysu, czy mogę to zrobić za pomocą filtra?

$("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(); 
    }); 
}); 

Funkcja setfill na fabric.PathGroup obiektów działa tylko wtedy, gdy wszystkie ścieżki ma ten sam kolor: https://github.com/kangax/fabric.js/blob/master/src/path_group.class.js#L99

Answer 2

można użyć OBJECT.setFill ("FILL_COLOR"); np

rect.setFill('red');