SVG圆形的鼠标悬停效果

Question

我对SVG非常陌生，如果这是一个基础问题，请您见谅。

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

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

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

是否可能监听鼠标悬停在特定圆圈上时触发的mouseOver事件？

- Which One

---

你能展示一下你目前尝试过的吗？ - depperm

你的第三句话是不正确的。第四句也是如此，毕竟d3本身是如何做到的呢？至于第五个问题，答案是肯定的，但你可能想问一个更具体的问题。 - Robert Longson

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

- Zevan

Answer 2

如果你希望这只是SVG，并且能够在浏览器中打开并看到效果（虽然Zevan的回答可以嵌入SVG），请使用像以下这样的内容：

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500">
  <circle id="circle1" cx="50" cy="50" r="20" fill="red" onmouseover="evt.target.setAttribute('fill', 'blue');" onmouseout="evt.target.setAttribute('fill','red');"/>
  <circle id="circle2" cx="150" cy="50" r="20" fill="green" onmouseover="evt.target.setAttribute('fill', 'blue');" onmouseout="evt.target.setAttribute('fill','green');"/>
</svg>

CSS选项较为简洁，但这种模式可能会为未来的鼠标处理提供更多的灵活性，特别是如果需要一个函数来确定在实际修改属性之前您想让用户“暂停”圆圈的时间长度。

- Jordan Read

Answer 3

试试这个...

<circle onmousemove={() => console.log('foo') }/>

- Bimal Grg

---

这不是有效的SVG，因为引号丢失了。看起来你正在使用某种框架？ - Emilia Bopp