如何遍历SVG节点添加点击事件？加载后找不到shape节点排查

核心错误：SVG文档访问方式不对 #

用<object>加载的SVG是独立的DOM文档，不能直接通过svgholder.getElementsByTagName()查找内部元素，必须先获取SVG的内部文档对象。

具体修正步骤 #

1. 正确获取SVG内部文档 #

在onload函数中，先拿到SVG的内部文档（兼容主流浏览器和IE）：

var svgDoc = svgholder.contentDocument || svgholder.contentWindow.document;

之后用这个svgDoc来查找<shape>节点：

var shapes = svgDoc.getElementsByTagName("shape");

2. 修复点击事件绑定的参数错误 #

你当前addEventListener的第四个参数用法错误，它是控制事件捕获的布尔值，不能用来传递ID。要获取点击元素的ID，直接在事件处理函数中通过this或event.target获取即可。

完整修正后的JS代码 #

<html>
<body>
<object data="test.svg" id="svgholder" type="image/svg+xml"></object>
<script>
    var svgholder = document.getElementById("svgholder");
    svgholder.onload = function () {
        console.log("svg loaded");
        // 获取SVG内部文档对象
        var svgDoc = svgholder.contentDocument || svgholder.contentWindow.document;
        var shapes = svgDoc.getElementsByTagName("shape");
        console.log(shapes.length);

        for (var i = 0; i < shapes.length; i++) {
            shapes[i].addEventListener("click", showshape, false);
        }
    }

    function showshape() {
        console.log(this.id);
    }
</script>
</body>
</html>

额外说明 #

你的SVG里的<shape>和<shapes>属于自定义标签，浏览器会正常解析为DOM元素，不影响查找和事件绑定，这部分无需修改。

内容的提问来源于stack exchange，提问作者Yan Kleber