在SVG元素上拖动光标会将光标更改为Webkit（Chrome / Safari）上的i-beam（例如|）

Question

svg内的任何地方，

• 在svg里面moused，例如在一个元素或svg画布本身上
• 拖动光标
• 注意光标如何变为工字梁

我试过的解决方案无效

• 将CSS光标更改为拖动的svg元素为“cursor：default！important”
• 将CSS游标更改为root svg元素为“cursor：default！important”
• 将CSS游标更改为html body元素为“cursor：default！important”
• 使用上述所有3的CSS
• 根据chrome sets cursor to text while dragging, why?
更改document.onselectstart
• 将根svg元素的cursor属性更改为“default”或“pointer”
• 如上所述更改拖动元素的cursor属性
• 更改根svg元素和拖动元素的cursor属性

我很欣赏任何想法。据我所知，这是Webkit中的一个错误。这种情况发生在Chrome和Safari中，但没有其他浏览器。

Answer 1

这是Webkit中报告的错误。它似乎也固定在夜间，但我不知道如何判断这种行为何时会出现在Chrome / Safari中。

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

另见：

• https://github.com/DmitryBaranovskiy/raphael/issues/517

Answer 2

不确定原因，或者这对我（你）修复是否足够好，但我发现当我在svg元素上调用JqueryUI的.draggable时，文本选择器光标消失了。可能是一个错误，但有趣。

Answer 3

如果您可以访问SVG源（它是XML），则可以添加

pointer-events="none"

属性为＆lt; text＆gt;元件（一个或多个）。 这将使光标保持为箭头而不是更改为工字梁。

不像设置全局CSS属性那么简单，但它是一种解决方案。

Answer 4

试试这个：

svg { cursor: default; }