鼠标悬停在 SVG 圆圈上答案

【问题标题】：Mouseover on SVG circles鼠标悬停在 SVG 圆圈上
【发布时间】：2015-09-12 11:51:13
【问题描述】：

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

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

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

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

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

【问题讨论】：

你能告诉我们你到目前为止所做的尝试吗？
你的第三句话不正确。至于第四个，不需要库，毕竟你认为 d3 本身是如何做到的？至于第五个答案是肯定的，但你可能想问一个更具体的问题。

标签： javascript canvas svg d3.js

【解决方案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

【讨论】：

【解决方案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 选项更简洁，但这种模式可能会为将来的鼠标处理提供更大的灵活性，特别是如果需要一个函数来确定在实际修改属性之前让用户在圆圈上“暂停”多长时间。

【讨论】：

【解决方案3】：

试试这个...

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

【讨论】：

这不是有效的 SVG，因为缺少引号。看起来您正在使用某种框架？