Javascript 鼠标悬停在 SVG 圆圈上
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31057699/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Mouseover on SVG circles
提问by Andrés Nava - Azure
I'm very new to SVG, so please forgive me if this is a basic question.
我对 SVG 很陌生，所以如果这是一个基本问题，请原谅我。
I would like to draw circles on the screen and respond whenever the user mouses over each circle.
我想在屏幕上绘制圆圈并在用户将鼠标悬停在每个圆圈上时做出响应。
From what I can tell, when listening to mouse events on an svg, we are actually listening to mouse events on the whole canvas and not on the shapes.
据我所知，当在 svg 上监听鼠标事件时，我们实际上是在整个画布上而不是在形状上监听鼠标事件。
If I want to handle events on the shapes, I have to use a library like D3.
如果我想处理形状上的事件，我必须使用像 D3 这样的库。
Is it possible to listen to mouseOver event that are triggered when the mouse pointer passes over a specific circle?
是否可以监听鼠标指针经过特定圆圈时触发的 mouseOver 事件？
回答by Zevan
No library is needed for this. Given the following SVG:
这不需要图书馆。鉴于以下 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.
您可以使用 CSS 或 Javascript 使这些圆圈以某种与鼠标相关的方式发生变化。
For a simple hover in css you can do something like:
对于 css 中的简单悬停，您可以执行以下操作：
#circle1:hover {
fill: blue;
}
Or any JavaScript mouse event like so:
或者像这样的任何 JavaScript 鼠标事件：
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
这是一个供您查看的演示：http: //codepen.io/ZevanRosser/pen/bdYyLp
回答by Jordan Read
If you want this to only be svg and be able to open this in a browser and see the effect (although Zevan's answer can be embedded in svg), use something like:
如果您希望它只是 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>
the CSS option shared is cleaner, but this pattern may offer more flexibility for future mouse handling, especially if needing a function to figure out how long you want to let a user "pause" over the circle before actually modifying the property.
共享的 CSS 选项更清晰，但这种模式可能为将来的鼠标处理提供更大的灵活性，特别是如果需要一个函数来确定在实际修改属性之前让用户在圆圈上“暂停”多长时间。
回答by Bimal Grg
Try this...
尝试这个...
<circle onmousemove={() => console.log('foo') }/>
