RE: Interactive Declarative Animation in <img> (was: new feature request)

Doug Schepers wrote
on  Thursday, March 26, 2015 1:47 AM:

>Since timeline-based declarative animation is specified and does work in
browsers, let's concentrate on your other issue: interaction-based
declarative animation (and interaction in general) in <img>.

I figured I'd fiddle a bit with some CSS just to see if the cross-browser
support for SVG animation was still so lagging behind SVG/SMIL as it was a
couple of years ago. It's always hard for me to tell what is due to browser
bugs and what is merely unspecced. I figured that perhaps some interactivity
could have sneaked in the back door through hover events in CSS, but haven't
gotten quite so far in my testing due to early idiosyncrasies. 

Here is a very simple example [1] with CSS-animated SVG taken from
Wikipedia's article on SVG animation [2] and embedded in HTML <img>.  The
image displays at different sized in IE vs. Chrome and FF. It does not
animate in Firefox or IE but does in Chrome/Opera. Safari/Win displays the
image, but of course not the animation since Safari is no longer developing
in the window environment. The CSS animation [3] does run in FF just fine,
just not when it is inside <img> .

A November 2014 article [4] suggests that as of that time, truly awful
cross-browser discrepancies exists for CSS3 animation of SVG, but that some
of those minefields can be avoided through script. 

I understand (please correct me if I'm wrong) that certain sorts of things
animateable through SVG-SMIL will never be animated through CSS. I recall
discussions here to the effect that xlink-href will not be, and seem to
recall reading somewhere that the "d" attribute of <path> will never be. 

My questions here are:
1. are the cross-browser idiosyncracies with CSS-animated animation in <img>
just browser bugs, and if so, whose bugs are they?
2. Is it true that script will always be required for certain animation
effects for those browsers that do not support SVG/SMIL? The question may
have implications toward future college acceptance requirements: SAT Math
scores and the like. 

BTW, for the SVG enthusiasts among you, one of the examples [5] at
Wikipedia's SVG animation page is particularly clever, I think.

Regards
David

[1] http://cs.sru.edu/~ddailey/ello/CSS3inHTMLimg.htm 
[2] https://en.wikipedia.org/wiki/SVG_animation  
[3]
https://upload.wikimedia.org/wikipedia/commons/e/ef/Hawaii_Island_topographi
c_map_CSS3_animation.svg 
[4] https://css-tricks.com/svg-animation-on-css-transforms/ 
[5] https://upload.wikimedia.org/wikipedia/commons/b/ba/Toy_train_SMIL.svg

Received on Thursday, 16 April 2015 14:34:38 UTC