SVG中怎么获取鼠标的当前坐标？

不会消失的夜晚 2015-07-13 01:19:30

SVG中怎么获取鼠标的当前坐标？是svg中的坐标，不是页面或屏幕的坐标。

...全文

543 1 打赏收藏转发到动态举报

写回复

1 条回复

切换为时间正序

请发表友善的回复…

发表回复

香蕉猪 2015-07-16

打赏
举报

回复

用屏幕坐标减去SVG的起始坐标不就好了。。。。

3. **处理`mousemove`事件**：当鼠标移动时，计算鼠标当前位置与初始点击位置的差值，将这个差值加到元素的`x`和`y`坐标上，从而实现元素的移动。 4. **解除拖拽**：在`mouseup`事件中，清除所有与拖拽相关的状态，...

在`mousedown`事件中，我们记录了鼠标按下时相对于元素左上角的坐标。在`mousemove`事件中，我们根据鼠标的移动更新元素的`translate`属性，从而实现拖拽效果。`mouseup`事件则用于在鼠标释放时重置初始坐标。通过...

4. 回调函数处理：在回调函数中，获取鼠标当前位置，然后更新光照形状的`x`, `y`, `width`, `height`（对于`<rect>`）或`cx`, `cy`, `r`（对于`<circle>`）属性，使得光照区域跟随鼠标移动。 5. 动画平滑过渡：为了...

5. 动态响应：如果你希望地图具有动态响应，比如在不同缩放级别下保持点击区域的准确性，可能需要使用SVG的`getBBox()`方法获取元素的边界框，然后根据当前视口的缩放比例调整判断逻辑。在实际项目中，你可能会...

1. 在mousedown事件中，获取鼠标点击时的坐标（clientX和clientY），以及SVG元素的当前位置（transform属性中的translate()信息）。 2. 在mousemove事件中，计算鼠标的移动距离（新的clientX和clientY减去初始值），...

61,125

社区成员

60,706

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章