title: Dragging cursor on SVG element changes cursor to i-beam (e.g. |) on Webkit (Chrome/Safari)
body: <p>Anywhere inside svg, </p>
  
  <ul>
  <li>mousedown inside the svg, e.g. on an element or on the svg canvas itself</li>
  <li>drag the cursor around</li>
  <li>note how the cursor changed to an i-beam</li>
  </ul>
  
  <p>Solutions I tried that didn't work</p>
  
  <ul>
  <li>changing the CSS cursor to the dragged svg element to "cursor: default !important"</li>
  <li>changing the CSS cursor to the root svg element to "cursor: default !important"</li>
  <li>changing the CSS cursor to the html body element to "cursor: default !important"</li>
  <li>using the CSS of all the above 3</li>
  <li>changing document.onselectstart as per <a href="https://stackoverflow.com/questions/2745028/chrome-sets-cursor-to-text-while-dragging-why">chrome sets cursor to text while dragging, why?</a></li>
  <li>changing the root svg element's <code>cursor</code> attribute to "default" or "pointer"</li>
  <li>changing the dragged element's <code>cursor</code> attribute as above</li>
  <li>changing both the root svg element's and dragged element's <code>cursor</code> attribute</li>
  </ul>
  
  <p>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.</p>