鼠標滑過SVG圈子

Question

我對SVG很新，所以請原諒我，如果這是一個基本問題。

我想在屏幕上繪製圓圈，並在用戶將鼠標懸停在每個圓圈上時作出響應。

從我所知道的，當在svg上監聽鼠標事件時，我們實際上是在整個畫布上而不是在形狀上監聽鼠標事件。

如果我想處理形狀上的事件，我必須使用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

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選擇是清潔的，但這種模式可以爲未來的鼠標操作提供了更大的靈活性，特別是當需要的功能來找出你想要多久讓用戶「在實際修改屬性之前先暫停「。