Dragging on <svg> gives I-bar cursor

[aaronsnoswell]

When dragging (click-drag-release) on an SVG element, webkit changes the cursor to an I-bar.

This is also documented below:

• http://stackoverflow.com/questions/7434147/dragging-cursor-on-svg-element-changes-cursor-to-i-beam-e-g-on-webkit-chro
• http://stackoverflow.com/questions/2745028/chrome-sets-cursor-to-text-while-dragging-why

I can confirm this is a webkit-only bug, I've tested positive for the bug in Safari, Chrome and Chrome Canary. This bug does not happen in Firefox or Opera.

Example: Drag the mouse within the element here: http://raphaeljs.com/pie.html

I can confirm that none of the fixes listed at the first stackoverflow page work. Going to go submit a bug on the webkit project now, will link here when I have done so.

[aaronsnoswell]

Looks to be resolved in the nightlies - not sure how to check when this behaviour will land in Chrome / Safari though...

• https://bugs.webkit.org/show_bug.cgi?id=6002
• https://bugs.webkit.org/show_bug.cgi?id=17258

[cameronjacobson]

It appears this behavior still exists in Chrome today. A way to get around this default behavior would be to assign the css "cursor" property from your code. I'm not 100% familiar with the convention you would use within raphael, but based on my experience with a project I'm currently working on, this method works just fine when dealing with raw svg / javascript.