Fabric.js：畫布上的筆觸顏色和寬度svg文件的問題

Question

我正在使用我的項目fabricJS，我有問題改變筆畫顏色和寬度。 我的頁面上有一些SVG文件，單擊用戶后可以將此SVG添加到畫布並修改其屬性。 填充它完美的工作，但中風我不能這樣做。 這是填充代碼，它運行良好：

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

以下是在畫布上加載SVG元素的代碼：

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

這里是筆划的代碼，它不起作用：

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

這應該這樣做（感謝SVG路徑導出）：

這是FabricJS代碼：

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

這是所有重要的JSFiddle， https： //jsfiddle.net/rekrah/wg2qxc8e/。

如果您有任何疑問，請告訴我。 我希望它有所幫助！