Cleanly morph SVG paths

Question

In this fiddle I am trying to morph the small H into the big H by simply extending the ascender. I thought it would be as simple as just providing the new path and letting Raphael work its magic, but apparently that's not the case.

Is there an easy way to elongate the ascender without having it mangle up first? Note this is one moving piece out of a much larger logo.

Answer 1

As far as I can see from the draw path, the two shapes are not drawn from the same starting point - so you're getting mangling.

SVG animation will always try to morph the first segment of the start shape into the first segment of the end shape. If the draw order is different, then you'll get strange effects like what you're seeing.

(And please note that you must have the same number of segments and the same order of path types in the start and end shapes.)