Javascript+；SVG：将鼠标事件添加到对象中的SVG

我在做一个数字化的棋盘游戏。在游戏的某个阶段，我需要添加鼠标悬停事件，当你将鼠标悬停在物体上时，它会改变物体的笔划颜色。因此，通过JavaScript将鼠标事件添加到SVG似乎是一个不错的选择

这是我的尝试

// wait until all the resources are loaded
    window.addEventListener("load", findSVGElements, false);

    // fetches the document for the given embedding_element
    function getSubDocument(embedding_element) {
        if (embedding_element.contentDocument) {
            return embedding_element.contentDocument;
        } else {
            var subdoc = null;
            try {
                subdoc = embedding_element.getSVGDocument();
            } catch(e) {}
            return subdoc;
        }
    }

    function findSVGElements() {
        var board = document.getElementById("board");
        var subdoc = getSubDocument(board);
            if (subdoc)
                for (i = 0; i < 48; i++) {
                    var city = subdoc.getElementById(String(i));
                    city.addEventListener("mouseover", city.setAttribute('stroke', 'lime') );
                    city.addEventListener("mouseout", city.setAttribute('stroke', 'ivory') );
                }
    }

//等待所有资源加载完毕
window.addEventListener（“加载”，findSVGElements，false）；
//获取给定嵌入元素的文档
函数getSubDocument（嵌入元素）{
if（嵌入_元素.contentDocument）{
返回嵌入元素.contentDocument；
}否则{
var subdoc=null；
试一试{
subdoc=嵌入_元素。getSVGDocument（）；
}捕获（e）{}
返回子文档；
}
}
函数findSVGElements（）{
var board=document.getElementById（“board”）；
var subdoc=getSubDocument（board）；
if（子文档）
对于（i=0；i<48；i++）{
var city=subdoc.getElementById（字符串（i））；
city.addEventListener（“mouseover”，city.setAttribute（'stroke'，'lime'）；
city.addEventListener（“mouseout”，city.setAttribute（'stroke'，'象牙”）；
}
}

---

这个脚本是根据一个脚本改编的，虽然有点过火，但效果不错。通过修改不同的属性更改，脚本似乎卡在

mouseout

事件上，无法读取或激活

mouseover

事件，但这可能是错误的。操纵SVG对我来说是一个全新的领域。如果我只是简单地设置属性，脚本就可以完美地工作。我只是不知道如何让鼠标事件正常运行。

我认为您的问题在于如何定义事件处理程序。它们应该是函数，而不是语句。尝试：

city.addEventListener("mouseover", function() { this.setAttribute('stroke', 'lime') });
city.addEventListener("mouseout", function() { this.setAttribute('stroke', 'ivory') ));

---

一般来说，在CSS中更改悬停时的颜色会更好。您可以在元素上添加/删除/更改一个

类

，该元素在您希望从“不更改”更改为“更改”并返回时启用/禁用颜色更改。OP不能真正使用CSS，因为他显然是通过

@Paul LeBeau将SVG嵌入到对象中。我这样做是因为SVG相当复杂，在许多对象上都有过滤器，我不想把HTML弄得乱七八糟。但是，我确实在SVG本身中添加了一些CSS样式。我创建了一个

不可用

类和

可用

类，后者带有一个

悬停

伪类。我还没有实现一个用于切换类的脚本，但是颜色更改确实有效。不过我注意到开关上有点滞后。我不确定我是否只需要优化SVG，CSS是否慢，或者我是否只是累了。