Fabric.js: Probleme mit Strichfarbe und Breite Svg-Dateien auf Leinwand

Question

Ich benutze in meinem Projekt fabricJS und ich habe Probleme, Strichfarbe und Breite zu ändern. Ich habe einige SVG-Dateien auf meiner Seite und nach dem Klicken kann Benutzer diese SVG Canvas hinzufügen und seine Eigenschaften ändern. Mit fill funktioniert es perfekt, aber mit stroke kann ich nicht dasselbe machen. Dies ist der Code für die Füllung und es funktioniert gut:

function setImageColor(element) 
{ 
    var activeObject = canvas.getActiveObject(), 
    color = "#"+element.value; 

    console.log(color)  
    console.log(activeObject) 
    activeObject.set({fill : color}); 
    canvas.renderAll(); 
} 

jscolor.addEventListener('change', function() 
{ 
    setImageColor(this); 
}); 

Hier Code zum Laden von SVG-Elementen auf Leinwand:

shapes.forEach(function(e) 
{ 
    e.addEventListener("click", function() 
    { 
     var src = e.src; 
     fabric.loadSVGFromURL(src, function(objects, options) 
     { 
      var obj = fabric.util.groupSVGElements(objects, options); 
      canvas.add(obj).renderAll(); 
      obj.scaleToHeight(127) 
       .scaleToWidth(90) 
       .center() 
       .setCoords(); 
      canvas.setActiveObject(obj).renderAll(); 
     }); 
    }); 
}); 

und hier ist der Code für den Hub und es funktioniert nicht:

function setStrokeColor(element) 
{ 
    color = "#"+element.value; 
    var obj = canvas.getActiveObject(); 
    console.log(color)  
    console.log(activeObject) 
    activeObject.set({stroke : color, strokeWidth: 5}); 
    canvas.renderAll(); 
} 

var stroke = document.getElementById("stroke"); 
console.log(stroke) 

stroke.addEventListener('change', function() 
{ 
    setStrokeColor(this); 
}); 

Answer 1

Dies sollte es (danke für den SVG-Pfad-Export) tun:

Hier ist der FabricJS Code:

fabric.loadSVGFromString('<svg id="Warstwa_1" data-name="Warstwa 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70"><defs><style>.cls-1{fill:none;stroke:#000;stroke-miterlimit:10;}</style></defs><title>generator ikon</title><path class="cls-1" d="M60,35A25,25,0,1,1,35,10,25,25,0,0,1,60,35Z"/></svg>', function(objects, options) { 
    var shape = fabric.util.groupSVGElements(objects, options); 
    shape.set({ 
    left: 50, 
    top: 50, 
    scaleX: 3, 
    scaleY: 3 
    }); 
    if (shape.paths) { 
    for (var i = 0; i < shape.paths.length; i++) { 
     shape.paths[i].set({ 
     fill: 'red', 
     stroke: 'green', 
     strokeWidth: 5 
     }); 
    } 
    } 
    object = shape; 
    canvas.add(shape); 
    canvas.renderAll(); 
}); 
var switchColors = true; 
document.getElementsByTagName("button")[0].addEventListener('click', function() { 
    if (object.paths) { 
    for (var i = 0; i < object.paths.length; i++) { 
     object.paths[i].set({ 
     fill: (switchColors ? 'green' : 'red'), 
     stroke: (switchColors ? 'red' : 'green'), 
     strokeWidth: (switchColors ? 10 : 5) 
     }); 
    } 
    } 
    switchColors = !switchColors; 
    canvas.renderAll(); 
}); 

Hier ist das alle wichtigen JSFiddle, https://jsfiddle.net/rekrah/wg2qxc8e/.

Lassen Sie mich wissen, wenn Sie weitere Fragen haben. Ich hoffe, es hilft!