Skip to content Skip to sidebar Skip to footer

Fabricjs - Clipping Area By Svg Object

I have a problem with FabricJS objects. I would like to create a clipping area (svg object), which will clips loaded images. I'm using clipTo method on loaded image passing it into

Solution 1:

I resolved my problem by combining the SVG shape into one path (without any polygons any other svg objects), then I pass the svg coords into fabircJS path. The valid SVG coords looks like that "M0,0H63.7V63.7H0Z"

fabric.loadSVGFromURL('object.svg',function(objects,options) {
            letimg1=newfabric.Path(objects[0].d, {
                fill:'#333',
                opacity:1,
                hasBorders:true,
                hasControls:true,
                hasRotatingPoint:true,
                selectable:true,
                preserveObjectStacking:true,
                objectCaching:false,
            });
     }

I hope it will help someone else :)

Post a Comment for "Fabricjs - Clipping Area By Svg Object"