snap.svg - 使用 Snap-SVG 跟踪光标

Question

我想知道是否有一种简单的方法可以使用 Snap-SVG 在鼠标光标的位置显示一个小圆圈。我已经浏览了很多 API 参考，但找不到任何东西。我以某种方式期望它是一个简单的功能。

Answer 1

您可以将处理程序附加到 Snap 纸上，您可能想要处理纸所在位置的偏移量，这可能会使它变得有点复杂（并且根据布局/滚动/缩放可能会变得更加棘手，但我已经尝试过保持尽可能简单），我已经包括了几个圆圈来突出差异。

jsfiddle

var s = Snap(400,400);
var c1 = s.circle(0,0,10).attr({ fill: "red" });
var c2 = s.circle(0,0,10).attr({ fill: "blue" });

function moveFunc( ev, x, y ) {
    c1.attr({ cx: x , cy: y });
    c2.attr({ cx: x - s.node.offsetLeft, cy: y - s.node.offsetTop });
};

s.mousemove( moveFunc );