如何为网页中SVG的path元素添加id属性？

我来帮你解决这个问题，结合你提供的代码，我整理了完整的解决方案，一步步来实现：

关键前提说明 #

首先要确保你的racks.svg文件和当前网页处于同域环境（相同域名、协议、端口），否则浏览器的同源策略会阻止你访问嵌入SVG的内部文档，导致无法修改path元素。

修正并完善你的代码 #

你的代码里getSubDocument函数有拼写错误，我已经修正并补充了兼容逻辑，同时添加了给path元素批量添加id的逻辑：

<html>
<head>
    <title>Bin Labeler</title>
</head>
<body>
    <embed class="emb" src="racks.svg" style="position: relative; width:100%; height:100%"/>
    <script>//<![CDATA[
        // 等待所有资源加载完成
        window.addEventListener("load", findSVGElements, false);

        // 获取嵌入元素的子文档（兼容新旧浏览器）
        function getSubDocument(embedding_element) {
            // 现代浏览器优先用contentDocument
            if (embedding_element.contentDocument) {
                return embedding_element.contentDocument;
            } 
            // 旧版浏览器兼容写法
            try {
                return embedding_element.getSVGDocument();
            } catch(e) {
                console.error('获取SVG文档失败:', e);
                return null;
            }
        }

        function findSVGElements() {
            // 获取embed元素
            const embed = document.querySelector('.emb');
            // 获取SVG内部文档
            const svgDoc = getSubDocument(embed);
            
            if (!svgDoc) {
                console.error('无法访问SVG文档，请检查跨域问题或SVG是否加载成功');
                return;
            }

            // 选中SVG里所有的path元素
            const allPaths = svgDoc.querySelectorAll('path');
            
            // 为每个path添加唯一id
            allPaths.forEach((pathEl, index) => {
                // 可选：如果path已有id，可跳过或替换，这里只给无id的元素添加
                if (!pathEl.id) {
                    // 生成唯一id，你可以自定义规则（比如结合path的d属性）
                    pathEl.id = `bin-path-${index + 1}`;
                    console.log('已添加id:', pathEl.id);
                }
            });
        }
    //]]></script>
</body>
</html>

核心逻辑解释 #

• 获取SVG文档：通过contentDocument（现代浏览器）或getSVGDocument（旧浏览器）获取嵌入SVG的内部文档对象，这是修改SVG内容的关键。
• 批量处理path元素：用querySelectorAll('path')选中所有path，通过循环为每个元素设置唯一id，示例里用bin-path-1、bin-path-2这种格式，你可以根据需求修改id命名规则（比如结合path的位置、功能命名）。
• 错误处理：添加了错误提示，方便你排查跨域或加载失败的问题。

可选扩展 #

如果你想给id设置更有意义的名称，可以根据path的其他属性生成，比如：

// 结合path的d属性的哈希值生成id
pathEl.id = `path-${btoa(pathEl.getAttribute('d')).slice(0, 8)}`;

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