SVG in HTML5: Browser differences, bug in IE9?

Here's an example of scripting in SVG that  is in-line in HTML5 at
http://granite.sru.edu/~ddailey/svg/svginHTML2.html (working in IE9, Firefox
and Chrome - but not yet in Opera which I think requires the document to be
XHTML) . Here are some observed differences:

1.       When initially drawn, the first circle is confined to a rectangle
representing the  SVG object in FF and Chrome, but  is unconstrained by that
box in IE9.

2.       The fact that the SVG itself has its height unspecified but that a
rectangle within it has height="100%" is interpreted differently by Chrome
which allows the rectangle to fill the rest of the HTML document. IE and FF
provide some default limit on the height of the SVG.

3.       Upon clicking in the rectangle of the SVG, FF and Chrome confine
new content to the extant SVG space - IE lets it bubble out into the HTML. I
rather prefer this behavior since I don't always want my butterflies to be
confined by rectangles; sometimes I want them to be able to sniff the nectar
from data in an HTML table and to use it to cross-pollinate a blog.

4.       In Chrome, the click event is still heard even if there is mouse
movement between mousedown and mouseup. IE has almost no tolerance for mouse
movement, FF has a wee bit of tolerance.

 

I suspect these are things that are not nailed down by the SVG-in-HTML specs
(either SVG or HTML5), but that they should be.

 

Cheers

David