MorphSVGPlugin: Won't work with some paths

[Justin N 1 Likes (Newbie)]

Hi, 

 

I have an SVG and I would like to morph between the letters and the icon in the SVG. 

 

What I've noticed is that I can morph the letter paths to other letter paths and I can morph the icon paths to other icon paths. However, when I try to morph the icon paths to letter paths, the icon paths appear to scale down and / or move and disappear.

 

What is happening and how do I fix this please ? 

 

Thanks

Justin

See the Pen KKxdree by justinjngan (@justinjngan) on CodePen

[PointC 14,465 Likes (Superhero)]

That letter a is way off position and super tiny. Here's your SVG file without any morphs and just pulled into AI. You can see it's not where you'd expect. 

 

 

 

Buttery smooth morphs with no surprises always starts with asset prep. One of the most important things I can recommend is using a background rectangle for all your vector exports. That will result in no weird transforms on paths and groups. I have a quick-tip tutorial about that here.

 

https://www.motiontricks.com/use-background-rectangle-with-svg-exports/

 

Happy tweening.

 

 

 

[Justin N 1 Likes (Newbie)]

Hi @PointC !

 

Hmmm, if that were the case, why would tweening one letter with another letter (including the 'a') work ?

 

Thanks

Justin

[PointC 14,465 Likes (Superhero)]

I don't have time to dive too deep into that SVG, but I see translates and scales on nearly everything. One group even has two translates on it. 🤷‍♂️

 

In my experience, you'll see no surprises if you use that background rectangle for exports and avoid all those additional transforms and scales. Best of luck and happy tweening.

[Justin N 1 Likes (Newbie)]

Hi, 

 

For anyone else experiencing unexpected morphs and shifting positions, the solution is straight forward. 

 

In your graphics editing software, what you will want to find is an option to flatten transforms when exporting.  Background rectangles don't always fix transform issues.

 

Appreciate the replies @PointC, but your original reply suggested adding a box which does not address the issues. Your latter suggestion points out the transform issues, appreciate it but found it while addressing the box issue which did not help.