Fabric js：禁用导入的 SVG 的描边阴影

Question

我正在开发 fabric js 应用程序，我正在尝试将阴影应用于没有笔划阴影的导入 SVG
当我将阴影应用于 SVG 时，阴影也应用于 svg 的笔画，但我不想要这个
在此先感谢您的帮助我试过的代码是

canvas = new fabric.Canvas('canvas');
var shadow = {
    color: 'rgba(0,0,0,0.6)',
    blur: 20,    
    offsetX: 10,
    offsetY: 10,
    opacity: 0.6,
    fillShadow: true, 
    strokeShadow: false
}

var s = '<svg width="100" height="100"><polygon points="30 0, 70 0, 99 33, 99 66, 70 99, 30 99, 0 66, 0 33"  fill="#bbb"/></svg>'
fabric.loadSVGFromString(s, function(objects, options) {
  var shape = fabric.util.groupSVGElements(objects, options);
//shape.setShadow("10px 10px 5px rgba(94, 128, 191, 0.5)");
  if (shape.isSameColor && shape.isSameColor() || !shape.paths) {
            console.log('shape');
            shape.set({
                strokeWidth: 3,
                stroke: '#000'
            });
        }
        if (shape.paths) {
            console.log('shape path');
            /*for (i in shape.paths) {
                shape.paths[i].set({
                    strokeWidth: strokewidth,
                    stroke: strokecolor
                });
            }*/
            allObjects = shape.paths;
        $.each(allObjects, function(key, value) {
             value.set({
                    strokeWidth: 3,
                stroke: '#000'
                });
        });
        }
        
//shape.setShadow("10px 10px 5px rgba(94, 128, 191, 0.5)");
shape.setShadow(shadow);


  canvas.add(shape).renderAll();
});

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id='canvas' width="500" height="400" style="border:#000 1px solid;"></canvas>

Answer 1

canvas = new fabric.Canvas('canvas');
var shadow = {
    color: 'rgba(0,0,0,0.6)',
    blur: 20,    
    offsetX: 10,
    offsetY: 10,
    opacity: 0.6,
    affectStroke: false
}

var s = '<svg width="100" height="100"><polygon points="30 0, 70 0, 99 33, 99 66, 70 99, 30 99, 0 66, 0 33"  fill="#bbb"/></svg>'
fabric.loadSVGFromString(s, function(objects, options) {
  var shape = fabric.util.groupSVGElements(objects, options);
  if (shape.paths) {
        allObjects = shape.paths;
        $.each(allObjects, function(key, value) {
             value.set({
                shadow: shadow,
                strokeWidth: 3,
                stroke: '#000',
             });
             value.shadow.affectStroke = false;
        });
  }
  canvas.add(shape).renderAll();
});

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id='canvas' width="500" height="400" style="border:#000 1px solid;"></canvas>

我改进了您的代码以仅在路径而不是 pathGroup 上应用阴影。对于 shadow.affectStroke = false 无法在 pathGroups 上工作的问题，这可能是一个错误，或者只是 fabric.PathGroup 阴影功能实现不佳。

Fabric js：禁用导入的 SVG 的描边阴影

Fabric js: Disable stroke shadow of imported SVG

html

javascript

svg

html5-canvas

fabricjs