SVG 事件监听器

SVG 是一种矢量图标语言，用于创建基于 XML 的可伸缩矢量图形。在 SVG 中，可以通过事件监听器来实现交互功能，例如用户点击、鼠标滑过等操作，使得 SVG 图像更加生动和灵活。

监听器类型

SVG 支持多种类型的事件监听器，包括：

• click：点击事件
• mouseover：鼠标滑过事件
• mouseout：鼠标滑出事件
• mousedown：鼠标按下事件
• mouseup：鼠标松开事件

可以在 SVG 元素上绑定这些事件监听器，例如：

<svg>
  <rect id="my-rect" x="10" y="10" width="100" height="100"/>
</svg>

<script>
  var myRect = document.getElementById("my-rect");
  myRect.addEventListener("click", function() {
    alert("You clicked the rectangle!");
  });
</script>

在上面的示例中，当用户点击矩形时，将触发一个弹窗，显示出提示信息。

监听器参数

监听器函数可以传入一个事件参数，包含了事件的相关信息，例如：

<svg>
  <rect id="my-rect" x="10" y="10" width="100" height="100"/>
</svg>

<script>
  var myRect = document.getElementById("my-rect");
  myRect.addEventListener("mouseover", function(event) {
    console.log("Mouse is over rectangle at (" + event.clientX + "," + event.clientY + ")");
    myRect.setAttribute("fill", "red");
  });
  
  myRect.addEventListener("mouseout", function(event) {
    console.log("Mouse is out of rectangle");
    myRect.removeAttribute("fill");
  });
</script>

在上面的示例中，当用户将鼠标滑过矩形时，矩形的颜色变为红色，并在控制台中打印出鼠标的位置信息。当用户将鼠标滑出矩形时，颜色恢复为原来的颜色，同时打印出鼠标离开的信息。

总结

SVG 事件监听器为 SVG 图像提供了交互性和灵活性，可以实现用户交互等功能。可以通过绑定不同类型的监听器来实现不同的操作，监听器函数可以传入事件参数，包含了事件的相关信息。