Morphing help - cannot morph a <G> SVG element.

[Acmafali 0 Likes (Newbie)]

Hi,

 

I'm trying to morph one SVG to another, the SVG's are ontop of each other. Its an SVG of a brain that morphs into a thumbs up. I keep getting the error:

WARNING: cannot morph a <G> SVG element. Use MorphSVGPlugin.convertToPath(elementOrSelectorText) to convert to a path before morphing.

The brain has an id of #start.

The thumbs up as an id of #end.

 

The thumbs up is hidden in the css.

 

I'm not sure where I'm going wrong, the codepen is attached.

See the Pen WwxvZO by anon (@anon) on CodePen

[Diaco 1,948 Likes (Superhero)]

Hi Acmafali 

 

with MorphSVGPlugin you can Morph these SVG tag : <path> <polyline> <polygon> ,  not group of svg elements ( < g > tag )

  

There's a utility function, MorphSVGPlugin.convertToPath() that can convert primitive shapes like <circle>, <rect>, <ellipse>, <polygon>, <polyline>, and <line> directly into the equivalent <path> that looks identical to the original and is swapped right into the DOM.

[Acmafali 0 Likes (Newbie)]

Hi Diaco,

 

I tried to include those tags into the MorphSVGPlugin.convertToPath() utility function but i still get the same problem, i excluded the <g> tag as well. Really confused

[Jonathan 5,176 Likes (Superhero)]

Acmafali, i did notice in your codepen example above that your <g> tag with an id of #end was empty and had no <path>, <polyline>, or <polygon> element inside it like Diaco advised above.

[Acmafali 0 Likes (Newbie)]

Yup!

 

I got rid of all of the groups when in adobe illustrator, its all good now!

 

Thanks guys!!