Fabric.js - आयातित svg

Question

के रंग/भरने/स्ट्रोक को बदलें क्या loadSVGFromURL का उपयोग कर कैनवास पर रखे कपड़े में एक एसवीजी का रंग बदलने का कोई तरीका है? एसवीजी सिर्फ एक तीर है, अगर मैं भरने या स्ट्रोक सेट नहीं कर सकता, तो क्या मैं इसे फ़िल्टर के साथ कर सकता हूं?

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