A couple of weeks ago I blogged that Safari 3 beta’s SVG support was buggy.

Here’s a concrete example (if you are using Internet Explorer unfortunately you won’t see anything at all). The svg drawing below is relatively positioned by 50 pixels (if you are not familiar with CSS terminology, that means it is offset 50 pixels down and right of where it normally would be drawn). When you mouse over the blue rectangle, it should turn red. This works correctly in Opera and Firefox.

However, in Safari, the blue rectangle turns red only when you mouse over the yellow rectangle! It sure looks like Safari isn’t taking into account the relative offset of the SVG element. Absolutely positioning the SVG element only makes things worse – only a small part of the blue rectangle gets highlighted.

This is obviously a major bug, so we’ll report it to Apple and hope it gets fixed in time for the Safari 3 release.

window.onload = function()
{
var rect = document.getElementById(‘rect1’)
if (!rect) return
if (window.attachEvent) return
rect.setAttribute(‘fill’, ‘blue’)
rect.addEventListener(‘mouseover’, onMouseOver, false)
rect.addEventListener(‘mouseout’, onMouseOut, false)
}

function onMouseOver(event)
{
var rect = document.getElementById(‘rect1’)
rect.setAttribute(‘fill’, ‘red’)
}

function onMouseOut(event)
{
var rect = document.getElementById(‘rect1’)
rect.setAttribute(‘fill’, ‘blue’)
}