SVG weirdly morphing

[Tristan Landry]

Hi there,

I've been trying  to morph two paths inside a SVG but the result is weird: the morphed svg moves to the left side of the screen while the "end" path stays visible in the middle. Is the CSS the cause of my problem? Thanks in advance for your help.

P.S. This is for a conference on similarities between the two totalitarian states. I am a scholar.

Tristan

See the Pen rNGxVwz by cybergastronom (@cybergastronom) on CodePen

[Cassie]

Thanks for the explanation Tristan! 

You have a transform on the group containing the start path. morphSVG just looks at the path data, so the transform on the containing group is going to be ignored.

If I were you I'd open this up again in a graphics editor - remove the groups and make sure both elements are aligned on top of each other.

If you struggle - let me know what graphics editor you're using and I can try to give you some export tips!

 

(with the transform removed so you can see the alignment of the paths)

See the Pen yLzeYXj?editors=1100 by GreenSock (@GreenSock) on CodePen

p.s. Flex doesn't do anything when applied to SVG's - it's purely for alignment of HMTL DOM elements.

[Tristan Landry]

Thanks Cassie for the answer and the precision on flex.

I'm using Inkscape and would indeed appreciate your tips!

Tristan

[Cassie]

Sure thing!

So what you want - is for any movement you make in the graphics editor while dragging the shape around the canvas, to be represented in the shape's geometry (path data) rather than as transforms.

The top answer here has the steps you need to remove pesky transforms in inkscape https://stackoverflow.com/questions/13329125/removing-transforms-in-svg-files

 

This extension is also pretty handy.
https://github.com/Klowner/inkscape-applytransforms

Hope it helps! 

p.s. I also generally recommend affinity designer, it feels less clunky than inkscape and it's a one off (small) fee, as opposed to illustrator's adobe mafia pricing.  https://affinity.serif.com/en-gb/designer/

[Tristan Landry]

Thank you so much !🤗