Ткань ЯШ: Отключить тактный тень импортируемого SVG

Question

Я работаю на ткани 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, это может быть ошибка или просто ткань. Теневая функция PathGroup плохо реализована.