如何自动化将Illustrator中SVG路径重命名为对应上方文本ID？

步骤1：准备工作 #

• 导出Illustrator中的SVG文件，保留完整元素结构。
• 下载Snap.svg本地库文件，在HTML中引入：

<script src="snap.svg-min.js"></script>

步骤2：编写处理脚本 #

核心逻辑：遍历所有目标路径，通过位置匹配找到其正上方的对应文本，将文本内容转为合法ID后赋值给路径。

以下是可直接使用的完整HTML代码：

<!DOCTYPE html>
<html>
<head>
    <script src="snap.svg-min.js"></script>
</head>
<body>
    <!-- 替换为你的SVG内容 -->
    <svg id="source-svg" width="1000" height="800">
        <!-- 示例元素，实际替换为你的文本和路径 -->
        <text x="60" y="25">用户列表</text>
        <path id="paths" d="M50,30 h100 v70 h-100 z" fill="#f0f0f0"/>
        <text x="210" y="25">订单统计</text>
        <path id="paths" d="M200,30 h100 v70 h-100 z" fill="#f0f0f0"/>
    </svg>

    <script>
        // 加载目标SVG
        const svg = Snap("#source-svg");

        // 获取所有文本元素和待重命名的路径（筛选ID为paths的路径）
        const textElements = svg.selectAll("text");
        const targetPaths = svg.selectAll("path[id='paths']");

        // 遍历每个路径，匹配对应文本
        targetPaths.forEach(path => {
            const pathBounds = path.getBBox();
            let matchedText = null;
            let minVerticalGap = Infinity;

            textElements.forEach(text => {
                const textBounds = text.getBBox();
                // 判断文本是否在路径正上方且水平重叠
                const isAbove = textBounds.y2 < pathBounds.y1;
                const isOverlap = textBounds.x1 < pathBounds.x2 && textBounds.x2 > pathBounds.x1;
                
                if (isAbove && isOverlap) {
                    const gap = pathBounds.y1 - textBounds.y2;
                    // 取距离最近的文本作为匹配目标
                    if (gap < minVerticalGap) {
                        minVerticalGap = gap;
                        matchedText = text;
                    }
                }
            });

            // 重命名路径ID
            if (matchedText) {
                const rawText = matchedText.node.textContent.trim();
                // 转换为合法SVG ID：替换空格为下划线，移除特殊字符
                const validId = rawText.replace(/\s+/g, "_").replace(/[^a-zA-Z0-9_]/g, "");
                path.attr("id", validId);
                console.log(`路径已重命名：${validId}`);
            } else {
                console.log("未找到匹配文本的路径");
            }
        });

        // 输出修改后的SVG代码，复制即可使用
        console.log("处理完成，修改后的SVG代码：");
        console.log(svg.toString());
    </script>
</body>
</html>

步骤3：使用说明 #

1. 将你的SVG内容替换到<svg id="source-svg">标签内；若SVG为外部文件，可替换为Snap.load("your-file.svg", function(svg) { /* 核心逻辑写在这里 */ })加载。
2. 若你的矩形用<rect>标签而非<path>，将代码中的path选择器改为rect即可。
3. 打开HTML文件，浏览器控制台会输出重命名日志，最后打印的完整字符串就是修改后的SVG代码，复制保存即可。

注意事项 #

• 确保文本与路径的位置关系为文本在路径正上方且水平对齐，否则需调整位置判断逻辑。
• SVG ID仅允许字母、数字和下划线，代码已做基础转换，若有特殊字符可自行补充替换规则。
• 大文件处理时需稍作等待，控制台会实时输出处理进度。

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