在 Webkit (Chrome/Safari) 上拖动 SVG 元素上的光标会将光标更改为工字梁(例如 |)
在 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
这是 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:
不知道为什么,或者这对我(你)来说是否是一个足够好的修复,但我发现当我在 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.
如果您有权访问 SVG 源(它是 XML),则可以
向添加属性。元素。
这将导致光标保持为箭头而不是更改为工字梁。
虽然不像设置全局 CSS 属性那么简单,但它是一个解决方案。
If you have access to the SVG source (it's XML), you can add a
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.
试试这个:
Try this: