javascript - 鼠标悬停在 SVG 圆圈上

Question

我是 SVG 的新手，所以如果这是一个基本问题，请原谅我。

我想在屏幕上画圆圈，并在用户将鼠标悬停在每个圆圈上时做出响应。

据我所知，当在 svg 上监听鼠标事件时，我们实际上是在整个 Canvas 上监听鼠标事件，而不是在形状上。

如果我想处理形状上的事件，我必须使用像 D3 这样的库。

是否可以监听当鼠标指针经过特定圆圈时触发的 mouseOver 事件？

Answer 1

这不需要库。给定以下 SVG:

<svg width="500" height="500">

  <circle id="circle1" cx="50" cy="50" r="20" fill="red"/>
  <circle id="circle2" cx="150" cy="50" r="20" fill="green"/>

</svg>

您可以使用 CSS 或 Javascript 使这些圆圈以与鼠标相关的某种方式发生变化。

对于在 css 中的简单悬停，您可以执行以下操作:

#circle1:hover {
  fill: blue;
}

或者像这样的任何 JavaScript 鼠标事件:

document.getElementById('circle2').addEventListener('click', function(e) {
    e.currentTarget.setAttribute('fill', '#ff00cc');
});

这是一个演示供您查看: http://codepen.io/ZevanRosser/pen/bdYyLp