鼠标悬停在SVG圈子上

时间:2015-06-25 18:10:42

标签: javascript canvas svg d3.js

我对SVG很新,所以如果这是一个基本问题,请原谅我。

我想在屏幕上画圆圈,并在用户将鼠标放在每个圆圈上时做出回应。

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

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

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

3 个答案:

答案 0 :(得分:6)

No library is needed for this. Given the following 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>

You could use CSS or Javascript to have these circles change in some way related to the mouse.

For a simple hover in css you can do something like:

#circle1:hover {
  fill: blue;
}

Or any JavaScript mouse event like so:

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

Here is a demo for you to check out: http://codepen.io/ZevanRosser/pen/bdYyLp

答案 1 :(得分: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选项更清晰,但是这种模式可以为将来的鼠标处理提供更大的灵活性,特别是如果需要一个函数来确定用户在实际修改属性之前让用户“暂停”多长时间。

答案 2 :(得分:0)

试试这个......

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