SVG animation II: Motion graphs

I wanted to have a rolling ball move along a surface while a time versus distance graph plotted the time and position of the animated rolling ball. After looking over Animating Your SVG by Charles McCathienvile at Dev.Opera I felt that animating attributeName="d" in the path element would produce the desired effect. The ball, meanwhile, would be animated using animateMotion and an mpath child element. 


The resulting SVG animation failed to run in Google Chrome 4.0.249.43 but worked very nicely in Opera 10.10. This was a puzzle, and disappointing. My target is Ubuntu 9.10 computers running FireFox 3.5. Unfortunately not even Gecko 1.9.3/FireFox 3.7 will support animateMotion. Google Chrome, however, will run on Ubuntu 9.10, and is in place on some of the machines already. So a Chrome friendly solution, which might also run in FireFox 3.7, was desired. 

The animation works as I expected in Opera, but failed in Chrome. The "d" path line appears instantaneously and then disappears in Chrome. Since Opera shows a smooth animation with the correct fill="freeze" at the end, I have to think the problem is in Chrome and not my code.

I found that by animating the "cx" and "cy" attributes on a circle element I could achieve an equally useful effect to illustrate linear and accelerated motion. There are still some oddities. The linear animation works better in Chrome. In Opera the coordinate circle disappears in the "last decade" and remains invisible unless a screen repaint is forced. In Chrome, the linear animation keeps its radial gradient fill, but the accelerated motion animation loses its radial gradient fill. As the underlying animation techniques are the same, this is a puzzle.


I would not have made any progress on these physical science animations without the Opera article noted above and the wonderful series of SVG animation tests by Dr. Olaf Hoffmann.



Ultimately I will probably have to install Opera in the Ubuntu laboratory as Chrome does not support MathMl, another important technology on a physical science page. Still, that will not resolve everything as Opera did not render an embedded XHTML table in an SVG which in turn was embedded in an XHTML5 file. Maybe I cannot have SVG animation animateMotion, animate attributeName="d", MathMl, and foreignObject all in one file and render it. Every browser will object to one or another of the items in that list. 

Popular posts from this blog

Box and whisker plots in Google Sheets

Traditional food dishes of Micronesia

Creating histograms with Google Sheets