📜  svg 事件监听器 (1)

📅  最后修改于: 2023-12-03 15:05:24.854000             🧑  作者: Mango

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