experiments with SVG in HTML and vice versa

I have just had a bit of fun playing with SVG inline in HTML and HTML inside
foreignObject.  Things work a heck of a lot better now than they did two
years ago, I'm pleased to report.

 

a.       http://cs.sru.edu/~ddailey/svg/foreign/FObject1.htm contenteditable
HTML div tag inside resizing SVG (with animated dash array - just to prove
it's SVG) - it works basically the same in all browsers (except IE which
still hasn't done foreignobject). Firefox runs the animation about six times
faster than anyone else. Last time I heard from the FF people about this (a
couple of years ago), they seemed to say they had it right and everyone else
had it wrong. Are there other ideas?

b.      http://cs.sru.edu/~ddailey/fading/slides/SVGoverIframe2.htm an
inline SVG is CSS styled to overlap precisely with an iframe underneath. The
iframe's contents are swappable between SVG and html. Mouse events properly
pass through the transparent parts of the top SVG to content underneath
(some fancy footwork was necessary to get the mouse events to pass through
to the underlying content). I was sort of surprised that so much of this
worked and (except for the animation which is SMIL) in all browsers
including IE.

c.       http://cs.sru.edu/~ddailey/fading/slides/SVGforeignObject2.htm For
some reason, the HTML inside the iframe inside the foreignObject of the SVG
ends up being hideously expanded, so I tried rescaling it. I was successful
only in Firefox. Chrome and new Opera screw up the z-index of the
foreignobject and also its dimensions. Does anyone see a way out of the
cross browser troubles here?

 

Cheers

David