In this piece of SVG (tried in FF 8, Safari 5.1.2, Chrome 16, all on Mac), when moving mouse over the bar, none of the browsers properly detect each on-mouse-over/out event, sometimes it works sometimes it doesnt. But it's consistent across all the browsers so it's probably something about the SVG code. Using onmouseover and onmouseout gives the same result - doesn't work properly.
What would be the correct way of implementing on hover for SVG rectangles?
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600" version="1.1" style="display:inline">
<style type="text/css">
.bar {
fill: none;
}
.bar:hover {
fill: red;
}
</style>
<g>
<rect class="bar" x="220" y="80" width="20" height="180" stroke="black" stroke-width="1" />
</g>
</svg>
Answer
What's happening is that the mouse events are not detected because the fill is 'none', just add:
.bar {
fill: none;
pointer-events: all;
}
Then it works just fine.