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

Question

在svg内部的任何位置，

• 在svg内部按下鼠标，例如在元素或svg画布本身上
• 拖动光标
• 注意光标如何变成i-beam形状

我尝试过但不起作用的解决方案

• 将CSS光标更改为被拖动的svg元素为“cursor：default！important”
• 将CSS光标更改为根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中发生，而其他浏览器没有发生。

- maxkfranz

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

- aaronsnoswell

Answer 2

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

pointer-events="none"

将属性添加到<text>元素中。这将导致光标保持箭头形状，而不是变成I型光标。

虽然不像设置全局CSS属性那么简单，但这是一个解决方案。

- dlchambers

---

这个方法可能可行，但如果您需要在SVG元素上进行交互，这并不是一个明智的选择。 - maxkfranz

Answer 3

试试这个：

svg { cursor: default; }

- Milovan Zogovic

---

虽然这段代码可能回答了问题，但是提供关于为什么和/或如何回答问题的额外上下文可以提高其长期价值。 - JAL

那在今天是可行的，但在2011年左右Webkit bug活跃时不行。 - maxkfranz

Answer 4

不确定为什么，或者这是否是一个足够好的修复方法（对你来说），但我发现当我在SVG元素上调用JqueryUI的.draggable时，文本选择器光标会消失。可能是一个错误，但很有趣。

- dwerner