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');

Fabric.js - 更改导入的svg的颜色/填充/描边

2 个答案: