Fabric.js - 更改導入svg的顏色/填充/描邊

有沒有方法使用loadSVGFromURL更改放置在畫布上的結構中的svg的顏色？ svg只是一個箭頭，如果我不能設置填充或描邊，我可以用濾鏡來做到這一點嗎？Fabric.js - 更改導入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(); 
      }); 
      });

來源

2013-03-28 IlludiumPu36

http://fabricjs.com/hovering/和http：/ /fabricjs.com/customization/會讓你在那裏 – dsdsdsdsd 2013-04-24 19:48:38

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

來源

2013-04-29 10:06:33 Kienz

嘿Kienz，感謝您的幫助，但箭頭沒有被添加到畫布中，所有代碼... – IlludiumPu36 2013-05-01 01:48:14

嘿彼得，我做了jsfiddle的例子（loadSVGFromString而不是loadSVGFromURL）： http：//jsfiddle.n et/Kienz/nFqpB/ 你可以發佈你的SVG嗎？ – Kienz 2013-05-01 10:20:23

「你說顏色，我說顏色，讓我們把所有的東西都叫掉......」（道歉給喬治和艾拉格什溫）。問題是我使用colourSet（英文拼寫）和函數'colorSet'（Yank拼寫...）。現在都在工作。 – IlludiumPu36 2013-05-03 05:11:18

您可以使用OBJECT.setFill（'FILL_COLOR'）; 例如

rect.setFill('red');

來源

2013-04-25 10:33:07 rafi

Fabric.js - 更改導入svg的顏色/填充/描邊

回答

相關問題