Robot and Backgrounds

Animating an img tag

I animated an image which is pulled into the page using the img tag. The animation is in the SVG itself and uses translateX and a colour change. It works, both the translate and the colour change. (The colour change just affects the face.)

However, trying to access the image using javascript in the html page doesn't work. I tested this by putting the same code in this page - using img - and another page with the svg inline in the html file. The inline page worked just fine but this one does not.

Similarly, using the id of an element in the svg, in the style section in the html, doesn't work in this page but does work in the inline page.

The bottom line is that,
unless you can style and animate your svg,
using only styles and animation code in the SVG,
then:

Inline the SVG into the html page!

The inline version of this page is here:
Robot and Background - Inline