Javascript Event Handlers supported on SVG by Firefox 3.5

Question

Hi Guys,

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?

Answer 1

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/

Answer 2

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>

Answer 3

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