作爲html中的多邊形將鼠標移到區域

Question

我需要有一個區域，以便將鼠標懸停在事件上。我怎樣才能在JavaScript中做到這一點？

這個區域應該是

• 容易界定
• 無形的（我需要的背景是可見的）。

Answer 1

要使svg形狀（多邊形，矩形，圓形，路徑）不可見，fill屬性設置爲「none」。並且讓它仍然對包含pointer-events =「visible」的事件做出響應。然後在形狀中包含一個mouseover事件。注意： evt是svg事件對象調用。該函數本身也可以應用在它所連接的元素（目標）之外。例如，該函數可以在svg根目錄的任何地方繪製一個圓。

例如

<svg id="mySVG" width="400" height="400"> 
<rect id="myRect" x="0" y="0" width="100%" height="100%" pointer-events="visible" fill="none" onmouseover="myEvent(evt)" /> 
</svg> 

<script> 
    function myEvent(evt) 
    { 
     var target=evt.target 
     target.setAttribute("fill","red") 
    } 
</script>