Dragging cursor on SVG element changes cursor to i-beam (e.g. |) on Webkit (Chrome/Safari)

3
votes

Anywhere inside svg,

  • mousedown inside the svg, e.g. on an element or on the svg canvas itself
  • drag the cursor around
  • note how the cursor changed to an i-beam

Solutions I tried that didn't work

  • changing the CSS cursor to the dragged svg element to "cursor: default !important"
  • changing the CSS cursor to the root svg element to "cursor: default !important"
  • changing the CSS cursor to the html body element to "cursor: default !important"
  • using the CSS of all the above 3
  • changing document.onselectstart as per chrome sets cursor to text while dragging, why?
  • changing the root svg element's cursor attribute to "default" or "pointer"
  • changing the dragged element's cursor attribute as above
  • changing both the root svg element's and dragged element's cursor attribute

I'd appreciate any ideas. As far as I can tell thus far, it's a bug in Webkit. This happens in Chrome and Safari but no other browsers.

4
google-chromewebkitsvgcursordrag

4 Answers

4
votes

This is a reported bug in Webkit. It also appears to be fixed in the nightlies, though I'm not sure how to tell when this behaviour will land in Chrome / Safari.

See also:

0
votes

Not sure why, or if this is at all a good-enough-for-me (you) fix, but I found that when I call JqueryUI's .draggable on an svg element, the text selector cursor goes away. Probably a bug, but interesting.

0
votes

If you have access to the SVG source (it's XML), you can add a

pointer-events="none"

attribute to the <text> element(s). This will cause the cursor to remain as the arrow instead of changing to the I-beam.

Not as simple as setting a global CSS attribute, but it is a solution.

0
votes

Try this:

svg { cursor: default; }