Jump to content
Search Community

MorphSVGPlugin: Won't work with some paths

Justin N test
Moderator Tag

Go to solution Solved by Justin N,

Recommended Posts

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

Link to comment
Share on other sites

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. 

 

2zlt9Ge.jpg

 

 

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.

:)

 

 

 

  • Like 2
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • Solution

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.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...