在 Webkit (Chrome/Safari) 上拖动 SVG 元素上的光标会将光标更改为工字梁(例如 |)

发布于 2024-12-04 22:30:33 字数 730 浏览 1 评论 0原文

在 svg 内的任何位置,

  • 在 svg 内按下鼠标,例如在元素上或 svg 画布本身上
  • 拖动光标
  • ,注意光标如何更改为工字梁

不起作用

  • 解决方案我尝试过将 CSS 光标更改为拖动的 svg 元素 将
  • CSS 光标更改为 svg 根元素 更改为“cursor: default !important”
  • 将 CSS 光标更改为 html body 元素“cursor: default !important”
  • 使用上述所有 3 个更改 document.onselectstart 的 CSS,
  • 按照 chrome 在拖动时将光标设置为文本,为什么?
  • 将根 svg 元素的 cursor 属性更改为“default”或“pointer
  • ”如上所述,拖动元素的 cursor 属性同时
  • 更改根 svg 元素和拖动元素的 cursor 属性

我将不胜感激。据我目前所知,这是 Webkit 中的一个错误。 Chrome 和 Safari 中会出现这种情况,但其他浏览器不会出现这种情况。

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.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

策马西风 2024-12-11 22:30:34

这是 Webkit 中报告的错误。它似乎也已在夜间修复,但我不确定如何判断此行为何时会出现在 Chrome / Safari 中。

另请参阅:

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:

避讳 2024-12-11 22:30:34

不知道为什么,或者这对我(你)来说是否是一个足够好的修复,但我发现当我在 svg 元素上调用 JqueryUI 的 .draggable 时,文本选择器光标消失了。可能是一个错误,但很有趣。

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.

甜味超标? 2024-12-11 22:30:34

如果您有权访问 SVG 源(它是 XML),则可以

pointer-events="none"

添加属性。元素。
这将导致光标保持为箭头而不是更改为工字梁。

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

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.

调妓 2024-12-11 22:30:34

试试这个:

svg { cursor: default; }

Try this:

svg { cursor: default; }
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文