3

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.

Community
  • 1
  • 1
maxkfranz
  • 11,896
  • 1
  • 27
  • 36

4 Answers4

4

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:

aaronsnoswell
  • 6,051
  • 5
  • 47
  • 69
0

Try this:

svg { cursor: default; }
Milovan Zogovic
  • 1,541
  • 2
  • 16
  • 24
  • 1
    While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value. – JAL Aug 21 '15 at 16:26
  • That works today, but not when the webkit bug was active circa 2011. – maxkfranz Aug 31 '15 at 17:34
0

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.

dwerner
  • 6,462
  • 4
  • 30
  • 44
0

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.

dlchambers
  • 3,511
  • 3
  • 29
  • 34