将鼠标悬停在 html 中作为多边形的区域上

Question

我需要有一个将鼠标悬停在事件上的区域。如何在 JavaScript 中做到这一点？

这个区域应该是

• 易于定义
• 不可见（我需要背景可见）。

Answer 1

若要使 svg 形状（多边形、矩形、圆形、路径）不可见，请将 fill 属性设置为"none"。为了使它仍然响应事件，你包括 pointer-events="visible"。然后，在形状中包含鼠标悬停事件。注意：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>