如何将鼠标悬停在 SVG - Javascript

SVG是一种基于XML的图像格式，可以使用Javascript对其进行操作和动态修改。当一个SVG元素被鼠标悬停时，我们可以通过监听鼠标事件来触发相应的操作。

监听鼠标事件

在SVG中，鼠标事件包括：mousein、mouseout、mousemove、mousedown、mouseup以及click等。我们可以使用addEventListener方法来监听这些事件，例如监听鼠标悬停事件：

const svgElement = document.getElementById("my-svg");
svgElement.addEventListener("mouseover", function(){
  //执行鼠标悬停的操作
});

获取鼠标位置

当鼠标悬停在SVG元素上时，我们通常需要获取鼠标的位置来执行相应的操作。在Javascript中，我们可以通过clientX和clientY属性来获取鼠标在浏览器窗口中的位置：

const svgElement = document.getElementById("my-svg");
svgElement.addEventListener("mouseover", function(event){
  const x = event.clientX;
  const y = event.clientY;
  //执行与鼠标位置有关的操作
});

修改SVG属性

当鼠标悬停在SVG元素上时，我们可以通过修改元素的属性来改变它的外观或行为。例如，修改SVG矩形元素的颜色：

const rectElement = document.getElementById("my-rect");
rectElement.addEventListener("mouseover", function(){
  rectElement.setAttribute("fill", "red");
});

示例代码

const svgElement = document.getElementById("my-svg");
const rectElement = document.getElementById("my-rect");
svgElement.addEventListener("mouseover", function(event){
  const x = event.clientX;
  const y = event.clientY;
  rectElement.setAttribute("fill", "red");
});
svgElement.addEventListener("mouseout", function(event){
  rectElement.setAttribute("fill", "green");
});

以上代码将监听SVG元素上的鼠标悬停事件和鼠标移出事件，并修改矩形元素的填充颜色。请在此基础上进行修改来实现您自己的功能。