CODEWITHSUNDEEP
svgpathfabricjs
Rajeev Raina
Rajeev Raina

Reputation: 249

FabricJS load from SVG as Canvas Objects and not path

When I load the SVG to Canvas, I get the type as path and a path array. Is it possible to get the type (object) as "Circle", "Rect", "Line", etc, depending upon the path rather than path? OR Is it possible to convert the path to Canvas standard objects like circle, Rect, etc?

Upvotes: 1

Views: 2526

Answers (1)

dtx
dtx

Reputation: 340

I had a same problem, It was described here: FabricJs - Clipping area by SVG object.

I resolved that by bringing the SVG coords like "M0,0H63.7V63.7H0Z" (rect) and create FabricJS path:

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

And now you have a valid FabricJS object :) Also, to achieve that I have to combine my svg images into path, without any polygons and other SVG elements.

Upvotes: 1

Related Questions