给svg对象一个描边

Give a stroke to svg objects

本文关键字：一个 svg 对象      更新时间：2023-09-26

大家好，

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

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

无法工作，即使使用。

更新后也无法工作。
obj.setCoords();
canvas.renderAll();

所有其他属性，如填充或角度似乎工作。有人遇到过这个问题并知道如何解决吗?

谢谢你塞巴斯蒂安。

编辑:这就是我加载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);
            }
);

fabricjs不支持group或pathGroup的边框绘制。你能做的是将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);
            }
);
相关文章：