Place an svg element within an xhtml document. Then change the svg element's positioning to relative or absolute. Safari 3 beta no longer maps the mouse coordinates correctly to the SVG coordinate space, thus breaking mouse over, mouse out, etc. I've included a test case below. If you want to see it online, I put in on my blog at http://cfis.savagexi.com/articles/2007/06/24/safaris-svg-growing-pains. Thanks, Charlie ------------------ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body style="height: 100%"> <script type="text/javascript"> window.onload = function() { var rect = document.getElementById('rect1') 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') } </script> <p>Safari does not correctly translate mouse event locations to inlined svg elements. For example, below is an svg drawing relatively positioned by 50, 50 pixels. When you mouse over the blue rectangle, it should turn red. This works correctly in Opera and Firefox.</p> <p>However, in Safari, the blue rectangle turns red only when you mouse over the yellow rectangle! Safari doesn't appear to be 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. </p> <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" style="position: relative; left: 100px; top: 100px"> <rect x="0" y="0" width="300" height="300" style="stroke: green; fill: none" /> <rect id="rect1" x="100" y="100" width="100" height="100" /> <rect id="rect1" x="0" y="0" width="100" height="100" style="stroke: yellow; stroke-style: dashed; fill: none" /> </svg> </body> </html>
Thanks for the bug report and test case, Charlie! Please add test cases as an attachment to bugs in the future so that they're easier to test. Thanks!
Sorry about that :( Will do as an attachment next time. Let me know if you need any help testing. In case it helps, this is being used at social mapping site, http://www.mapbuzz.com, which allows users to create maps and add points/lines/polygons/etc on them. For example, this is a map of restaurants around Santa Fe - http://www.mapbuzz.com/viewer/570 We've been able to get this working in Firefox and Opera using SVG, and IE with VML. We haven't had much luck with Safari though - but to get a bit farther I think we need to get past this issue first. Once we do, I think our app is a pretty good test of a lot of basic SVG functionality (we don't use filters, text, etc).
Hi Charlie, (In reply to comment #2) > Sorry about that :( Will do as an attachment next time. Let me know if you > need any help testing. > > In case it helps, this is being used at social mapping site, > http://www.mapbuzz.com, which allows users to create maps and add > points/lines/polygons/etc on them. For example, this is a map of restaurants > around Santa Fe - http://www.mapbuzz.com/viewer/570 > > We've been able to get this working in Firefox and Opera using SVG, and IE with > VML. We haven't had much luck with Safari though - but to get a bit farther I > think we need to get past this issue first. Once we do, I think our app is a > pretty good test of a lot of basic SVG functionality (we don't use filters, > text, etc). I talked a bit with David Kilzer about this one. Thing is that we have a branch where it is fixed, but at the moment it is unsure when this will be merged with trunk. It is pretty sure that this will happen before Safari 3 final version, since it has a lot of fixes. If you feel adventurous I can give some instructions on how to build it yourself. Thanks for testing Safari+SVG! Cheers, Rob.
Hi Rob - I really hope that branch will be merged in. I'm happy to help test it out. I have access to Windows with VC++ so can build there. I also have a Mac, so could build there also if needed. Thanks, Charlie
Hi Charlie, (In reply to comment #4) > Hi Rob - I really hope that branch will be merged in. > > I'm happy to help test it out. I have access to Windows with VC++ so can build > there. I also have a Mac, so could build there also if needed. Very nice that you can build on two platforms. You should follow http://webkit.org/building/checkout.html , but instead of svn checkout http://svn.webkit.org/repository/webkit/trunk WebKit you should do: svn checkout http://svn.webkit.org/repository/webkit/branches/feature-branch WebKit Apart from that everything should be done according to the windows and mac build instructions. Good luck! If you are happy with the results please report back, then we can close (you, me, anyone) this bug. Cheers, Rob.
Well, we finally have nightlys for the feature branch, which you can use for easy testing: http://nightly.webkit.org/builds/mac-feature-branch/1 I expect that the feature branch will be rolled into trunk soon after leopard ships (which Apple last announced was in October... so by mid November this fix should be in main line).