Javascript Event Handlers supported on SVG by Firefox 3.5

I have been wracking my brains for the whole day on this one. It appears that the SVG DOM manipulations supported by Firefox 3.5 are very limited. A few properties like this.style.cursor can be successfully manipulated with an onmouseover handler but interesting properties like this.style.fill or this.style.stroke cannot be!

Does anybody know of a better way to achieve a simple开发者_开发技巧 change in border / outline color on mouse over?

Or is the whole idea of SVG allowing DOM manipulations merely an ugly infant?

Look here. The problem is, that the style property implementation in FF is indeed quite incomplete. You can circumvent this, however, using the also-standardized setProperty() method:

svgElement.style.setProperty("fill-opacity", "0.0", "")

(the third parameter allows for adding pseudo-classes).

For a simple mouse-over effect use an embedded (or external) stylesheet:

<style type="text/css">
rect { fill: green; }
rect:hover { fill: red; }
</style>

I would use CSS for this.

#myrec:hover {
  /* set styles in here /*
}

Also check these libraries out.

http://raphaeljs.com/ http://www.liquidx.net/plotkit/

To be fair the manipulations you seem to want only involve DOM 2 Style, not SVG DOM in particular.