Fabric.js：画布上的描边颜色和宽度 svg 文件的问题答案

【问题标题】：Fabric.js: Problems with stroke color and width svg files on canvasFabric.js：画布上的描边颜色和宽度 svg 文件的问题
【发布时间】：2017-08-25 19:06:10
【问题描述】：

我在我的项目中使用了 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);
});

【问题讨论】：

你能添加你的 SVG 吗？我猜 SVG 需要修改以允许您“中风”。过去，我不得不让我的图形艺术家（使用 Adobe Illustrator）在导出时进行调整，以便它的格式不同，使其能够更好地与 html 5 画布对象 - graphicdesign.stackexchange.com/questions/15475/… 一起播放。
我也在使用 Adobe Illustrator 创建 svg 文件。在来自 AI 的圆的 fidlejs 代码上。我要做很多形状，像平面或花朵这样的形状。 jsfiddle.net/ck75a2r3
HTML 5 Canvas 可能不喜欢 Circle，尝试从 Adobe 导出为路径...graphicdesign.stackexchange.com/questions/15475/…
这是带有 Rect 和 Circle 的 Bad SVG，这是带有路径的 Good SVG，我可以使用 HTML 5 Canvas 和 FabricJS 进行操作。
谢谢。我从 svg 制作了路径，但它仍然无法正常工作。我想在画布上编辑 svg。我使用的是 Fabric.js 库而不是标准画布。

标签： javascript canvas svg fabricjs

【解决方案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/。

如果您还有其他问题，请告诉我。希望对你有帮助！

【讨论】：

不用担心，当我更改加载到 HTML 5 画布上的 SVG 并使用 FabricJS 时，我不得不处理相同的特性。如果您愿意将我的回答标记为“有帮助”和/或“接受”下一个人，那就太好了。如有任何其他问题，请随时发布，我可以尝试进一步提供帮助。