javascript - 给 svg 对象添加描边

Question

大家好，

我试图在织物中给一个 svg 对象一个围绕边界框的描边。不幸的是

obj.set({
  'stroke': 'red',
  'strokeWidth': 2
});

即使更新后也无法使用。

obj.setCoords();
canvas.renderAll();

所有其他属性(如填充或 Angular )似乎都有效。有人遇到过这个问题并且知道如何解决吗？

已经谢谢你了 塞巴斯蒂安

编辑: 这就是我加载 svg 的方式:

var group = [];    
var loadedObjects;

fabric.loadSVGFromURL(

            'bla.svg', 

            function(objects, options) {
                loadedObjects = new fabric.Group(group);
            }, 

            function(item, object) {
                object.set('id', item.getAttribute('id'));
                group.push(object);
            }
);

Answer 1

fabricjs 不支持组或路径组的边框绘制。 您可以做的是将 svg 作为路径组加载。 加载后创建一个具有相同宽度和高度的矩形，给他相同的顶部和左侧。抚摸矩形并将它们组合在一起:

fabric.loadSVGFromURL(

            'bla.svg', 

            function(objects, options) {
                var svg = fabric.util.groupSvg(objects, options);
                var rect = new fabric.Rect({width:svg.width, height: svg.height, top:svg.top, left: svg.left, stroke: 'red', strokeWidth: 5});
                group = new fabric.Group([svg, rect]);
                canvas.add(group);
            }
);