Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
BhanuSingh

Unable to morph a text SVG

Go to solution Solved by GreenSock,

Recommended Posts

Hey I am trying to morph this SVG from krenovate to solutions but wouldn't morph.

 

"Cannot morph a <G> element. Use MorphSVGPlugin.convertToPath() to convert to a path before morphing."

 

From this other post I saw that it was recommended to use

 MorphSVGPlugin.convertToPath("#krenovate");

which I did but then also I couldn't morph it.

One thing I noticed when I used the converToPath function is that when I logged it returned this object

// [object Array] (1)
[<path id="krenovate" d=""></path>]

See the Pen RwVGvVK by bhanusinghR (@bhanusinghR) on CodePen

Link to post
Share on other sites

Hey @BhanuSingh,

 

You can morph a single shape (path) to another shape (path).
Not a complete group of paths!

 

MorphSVGPlugin.convertToPath:

 

Technically it’s only feasible to morph <path> elements or <polyline>/<polygon> elements, but what if you want to morph a <circle>, <rect>, <ellipse>, or <line>? 

 

MorphSVGPlugin.convertToPath("circle, rect, ellipse, line, polygon, polyline");

 

You don't need a conversion for a path.

 

Does that help you further? In the DOCS are a lot of examples.

 

Happy morphing ...

Mikel

 

  • Like 4
Link to post
Share on other sites
13 hours ago, mikel said:

You can morph a single shape (path) to another shape (path).

As my every letter is one path, I have to covert each of them, simultaneously to actually morph the entier text ?

Link to post
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.

×