Fabricjs: Fill Svg With Image Pattern

I’d like to load my SVG file, and fill it with pattern, created from my image file. Here is my current approach: canvas = new fabric.Canvas('mainCanvas') # image = new fabric.Ima

Solution 1:

The problem is likely that your SVG shape is parsed as a fabric.PathGroup rather than fabric.Path. Since fabric.PathGroup consists of multiple fabric.Path objects, you need to set their fill value rather than fill value of PathGroup instance itself.

if (obj instanceof fabric.PathGroup) {
  obj.getObjects().forEach(function(o) { o.fill = pattern; });
}
else {
  obj.fill = pattern;
}

If you go to kitchensink and use "Patternify" button, you can see that it works with more complex shapes (this is exactly the code we're using there):