作为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>