Cleanly morph SVG paths
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.
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.)
I'm still unable to add a simple comment to other people's questions and answer, so I'll have to comment as an answer.
I agree with Michael's answer, and I would like to add that I recommend starting with the resulting/transformed vector image, (save it), than work back toward the vector image to be transformed from.
I noticed that the first three points M,X,Y are handled carefully in the Raphael JS demos.
链接地址: http://www.djcxy.com/p/62358.html上一篇: 我可以得到一个处理
下一篇: 干净地改变SVG路径