CODEWITHSUNDEEP
svgfabricjs
ggmendez
ggmendez

Reputation: 621

Load SVG files in Fabric.js without grouping

I am having an issue loading certain SVG files in Fabric.js without grouping its elements.

The screenshots on how the file is displayed on the canvas with and without grouping are shown. The used SVG file is part of the Fabric.js' SVG test collection used at http://fabricjs.com/test/svg_import:

With grouping:

With grouping

Without grouping:

Without grouping

Both screenshots correspond to what it results when using the Fabric.js' kitchensink. However, I obtain the same results when writing my own program.

I have tried other files and they are shown with no problems whether the grouping is performed or not. Because of this, I suppose the distortions observed for this file on the non grouped version are due to some SVG elements (transformations or groups, perhaps?) that are not very well handled by the library's SVG parser.

Is it possible to avoid this issue under certain conditions? If so, what kind of SVG elements should be avoided to prevent files from presenting this problem?

Upvotes: 0

Views: 2609

Answers (1)

AndreaBogazzi
AndreaBogazzi

Reputation: 14731

This is a well known "missing feature" in fabric.js

https://github.com/kangax/fabric.js/issues/1520

The library is not handling very good the object with a "transformMatrix" property set.

the "transformMatrix" property comes from parsing the transform attribute of the elements and the parents elements.

Normally the objects are grouped in a pathGroup object that is capable of handling the transforMatrix and give a correct rendering with the downside effect the objects cannot be moved individually or rotated/scaled.

There is a work in progress about this feature (by me) to solve this but is not complete yet. You can download and try my branch here: https://github.com/asturur/fabric.js/tree/experimentalCBox

Is not perfect yet but is gonna be inserted in future fabric version to fix this issue.

Upvotes: 1

Related Questions