Fabric.js - Farbe ändern/füllen/Hub importiert svg

Gibt es eine Möglichkeit zum ändern der Farbe einer svg-Stoff auf der Arbeitsfläche platziert mit loadSVGFromURL? Die svg ist nur ein Pfeil, wenn ich kann nicht, legen Sie die Füllung oder die Kontur, kann ich das mit einem filter?

$("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();
          }); 
           });
fabricjs.com/hovering und fabricjs.com/customization bekommen Sie es

InformationsquelleAutor IlludiumPu36 | 2013-03-28

  1. 16
    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();
  }); 
});

    Die Funktion setFill auf dem Stoff.PathGroup Objekten funktioniert nur, wenn alle Pfade hat die gleiche Farbe:
    https://github.com/kangax/fabric.js/blob/master/src/path_group.class.js#L99

    Hey Kienz, vielen Dank für Ihre Hilfe bei diesem, aber der Pfeil wird nicht Hinzugefügt, um die Leinwand an alle mit code...
    Hey Peter, ich habe jsfiddle-Beispiel (mit loadSVGFromString statt loadSVGFromURL): jsfiddle.net/Kienz/nFqpB Können Sie Ihre SVG?!
    "Sie sagen von der Farbe, ich sage, die Farbe, nennen wir die ganze Sache ab..." (Entschuldigung an George und Ira Gershwin). Das problem war, dass ich mit colourSet (englische Schreibweise), und die Funktion bezeichnet "colorSet" (Yank Rechtschreibung...). Alle arbeiten jetzt.

    InformationsquelleAutor Kienz

  2. 0

    können Sie mit dem OBJEKT.setFill('FILL_COLOR');
    zum Beispiel 

    rect.setFill('red');

    InformationsquelleAutor rafi

Schreibe einen Kommentar