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

【问题标题】：Fabric js: Disable stroke shadow of imported SVGFabric js：禁用导入SVG的描边阴影
【发布时间】：2016-02-04 23:28:15
【问题描述】：

我正在开发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>

【问题讨论】：

标签： javascript html svg html5-canvas fabricjs

【解决方案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 阴影功能实现不佳。

【讨论】：