Resize Filter Bug

by Steve Eberhardt

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.1/fabric.min.js"></script>
<canvas id="c" width="600" height="400" class="c"></canvas>

CSS

canvas {
  border: 1px solid grey;
}

JavaScript

var canvas = new fabric.Canvas('c');

var svgString = '<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="418.943px" height="327.28px" viewBox="0 0 418.943 327.28" enable-background="new 0 0 418.943 327.28" xml:space="preserve"><path fill="#231F20" d="M209.472,0C93.784,0,0,66.106,0,147.653c0,47.213,31.439,89.25,80.364,116.278c-9.832,25.126-25.019,46.889-43.906,63.348c32.573-6.496,61.015-23.439,81.149-46.902c27.738,9.558,58.91,14.929,91.865,14.929  c115.688,0,209.472-66.107,209.472-147.653C418.943,66.106,325.16,0,209.472,0z"/></svg>';

fabric.loadSVGFromString(svgString, function(objects, options) {
  var obj = fabric.util.groupSVGElements(objects, options);
  obj.set({
  	scaleX: 0.8,
    scaleY: 0.8,
    top: 20,
    left: 40,
    stroke: 'purple',
    fill: 'red',
    strokeWidth: 100,
    paintFirst: 'stroke'
  })
  canvas.add(obj).renderAll();
});