Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Issue with SVG display / rendering in Fabric.js

Tags:

svg

fabricjs

I'm using FabricJS and I encounter a problem with the display of my SVG in the canvas:

  • the result is displayed outside the selection box of fabricJS (due to a translation ?)
  • the anchors of the selection disappear after a transformation and then it's impossible to find them back.

Here is a screenshot : enter image description here

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?

like image 593
Zorkzyd Avatar asked May 06 '12 12:05

Zorkzyd


1 Answers

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.

like image 86
AndreaBogazzi Avatar answered Sep 23 '22 06:09

AndreaBogazzi