Shape and color issues - Githubissues

kinimesi / cytoscape-svg

A Cytoscape.js extension to export the current graph view as an SVG.

https://kinimesi.github.io/cytoscape-svg

GNU General Public License v3.0

35 stars 5 forks source link

Shape and color issues #8

Open plasticfist opened 3 years ago

plasticfist commented 3 years ago

First, thank you for this, it looks like there are some style features that this (or the libraries it uses) fails to render as expected. Is there a supported style reference list? If there is I would evaluate changing my styles in order to get a good svg output.

I was surprised both by what it renders well, and just as surprised by the rest.

Here is an example cytoscape.js view

and the svg output

plasticfist commented 3 years ago

after several hours of trial and error, I can verify some styles that are problematic and need to be avoided...

most of the rounded shapes, aka "shape" : "round-octagon", round-pentagon, barrel, etc
the most problematic styling with a side effect, is if you use the edge style "edge-text-rotation": "autorotate", while it DOES rotate the edge labels (see above) it also blacks out all the shapes...

kinimesi commented 2 years ago

Hi @plasticfist, the second problem you mentioned should be resolved in the unstable branch. Please see relevant issue #7

The problem related to the shapes occurs with all rounded shapes. In the generated SVG, somehow the shape itself and its rounded corners are rotated and they don't align correctly. It needs further investigation.

KonradHoeffner commented 2 years ago

@kinimesi: I am using cytoscape-svg from npm where it is still only available as version 0.3.1, could you deploy the fixed version on npm?

kinimesi commented 2 years ago

I just published 0.4.0, try it out and let me know if it works, thanks.

KonradHoeffner commented 2 years ago

Yes it works perfectly, thanks!

feichin-noreja commented 1 month ago

The problem related to the shapes occurs with all rounded shapes. In the generated SVG, somehow the shape itself and its rounded corners are rotated and they don't align correctly. It needs further investigation.

@kinimesi i still have the problem with the rounded corners. Any updates on this topic?