I'm using FabricJS and I encounter a problem with the display of my SVG in the canvas:
Here is a screenshot :
I'm using an output SVG of Potrace and I think it's the origin of my issue.
Here is the code of the SVG: SVG code in pastebin
You can test it with FabricJS on this page: FabricJS Kitchensing example.
Just paste the code of the SVG in the "Load SVG" area, then resize and rotate the section box to display the SVG.
Do you know the part of my SVG code or the part of the fabricjS code that causes the issue ? If so, can I change it easily by myself ? If not, is it possible for anybody to correct or locate the possible mistake?
Thank you very much for your help.
EDIT: seemingly, FabricJS doesn't like this line of the SVG:
<g transform="translate(0,648) scale(0.098780,-0.098780)" fill="#000000" stroke="none">
And more especially the translate and scale attributes… How to fix it?
EDIT2: the solution would be that the translate and the scale are respectively equal to (0,0) and (1,1) or, better, that they're applied to the coordinates.
Does anybody have an idea to do that with Potrace or JS script?
2 years after, fabricJs is now able to fully parse and manage this SVG. Just paste the old pasteBin SVG code in the kitchenSink demo and you will see that it loads fine.
Lots of improvement happened recently in the SVG parsing area. I know this is not an answer as stackoverflow user would expect, but better to know that to think this is may still be a problem.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With