CODEWITHSUNDEEP
javascripthtmlsvghtml5-canvasfabricjs
Dinesh
Dinesh

Reputation: 855

Fabric js: Disable stroke shadow of imported SVG

I am working on fabric js app & i trying to apply shadow to imported SVG without stroke shadow
when i apply shadow to SVG then shadow is also applied to stroke of svg but i don't want this
Thanks in advance for help My tried code is

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>

Upvotes: 0

Views: 948

Answers (1)

AndreaBogazzi
AndreaBogazzi

Reputation: 14731

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>

I refined your code to apply the shadow just on paths instead of pathGroup. For what concerns shadow.affectStroke = false not working on pathGroups, this may be a bug, or simply fabric.PathGroup shadow feature is poorly implemented.

Upvotes: 3

Related Questions