批量修改SVG中path元素的id、name及displayName参数需求

问题描述 #

我有一个包含5000多个<path/>元素的SVG文件，每个元素带有name属性和非连续的id属性。这些元素代表县及其他区域，需要完成以下修改：

• 将每个path的id设置为与name属性值一致（注意原name值末尾有空格，需要去除）
• 更新onmouseover事件中displayName()的参数，传入对应的name值

当前path元素示例：

<path
style="font-size:12px;fill:#d0d0d0"
d="M 442.19,458.85 442.46,458.98 442.7 [.......] "
id="35512"
name="Atlanta, GA "
class="stateA countyB"
onmouseover="displayName('')" />

修改后目标效果：

<path
style="font-size:12px;fill:#d0d0d0"
d="M 442.19,458.85 442.46,458.98 442.7 [.......] "
id="Atlanta, GA"
name="Atlanta, GA"
class="stateA countyB"
onmouseover="displayName('Atlanta, GA')" />

我尝试过基础的jQuery和JavaScript代码，但元素数量庞大，担心数组操作打乱顺序，且id非连续，不知道如何逐个获取属性、对比并修改，同时更新onmouseover参数。预想的大致逻辑如下：

//document.querySelectorAll("path").forEach(function(item)???
if(Id != Name)
{
  id = name
  onmouseover="displayname('"+Name+"')"
}

补充说明：我还使用以下JS脚本创建工具提示，该脚本会调用displayName，对外部SVG文件更有效：

<text class="tooltip" id="area-name" x="10" y="650" visibility="hidden"> </text>

<script type="text/ecmascript"><![CDATA[
    // set trigger for tooltip
    var tooltip = document.getElementById('area-name');
    var triggers = document.getElementsByClassName('county');
    for (var i = 0; i < triggers.length; i++) {
        triggers[i].addEventListener('mousemove', showTooltip);
        triggers[i].addEventListener('mouseout', hideTooltip);
    }
    function showTooltip(evt) {
        tooltip.setAttributeNS(null, "visibility", "visible");
    }
    function hideTooltip(evt) {
        tooltip.setAttributeNS(null, "visibility", "hidden");
    }

    // tooltip area name
    function displayName(name) {
        document.getElementById('area-name').firstChild.data = name;
    }
]]>
</script>

解决方案 #

方案1：直接修改SVG文件（推荐，避免前端运行时开销） #

如果能直接修改本地SVG文件，用Node.js脚本处理最高效，不会有前端渲染时的性能问题。以下提供两种实现方式：

方式A：正则快速处理（适合结构规范的SVG）

const fs = require('fs');

// 读取SVG文件内容
const svgContent = fs.readFileSync('./your-map.svg', 'utf8');

// 正则匹配并替换path的id、name和onmouseover属性
const updatedSvg = svgContent.replace(
  /<path([\s\S]*?)id="[^"]+"([\s\S]*?)name="([^"]+)"([\s\S]*?)onmouseover="displayName\(''\)"([\s\S]*?)\/>/g,
  (match, p1, p2, nameAttr, p4, p5) => {
    const cleanName = nameAttr.trim();
    return `<path${p1}id="${cleanName}"${p2}name="${cleanName}"${p4}onmouseover="displayName('${cleanName}')"${p5}/>`;
  }
);

// 写入修改后的内容到新文件
fs.writeFileSync('./updated-map.svg', updatedSvg, 'utf8');

方式B：XML解析库遍历处理（适合属性顺序混乱的SVG）

const { DOMParser, XMLSerializer } = require('xmldom');
const fs = require('fs');

const svgContent = fs.readFileSync('./your-map.svg', 'utf8');
const parser = new DOMParser();
const doc = parser.parseFromString(svgContent, 'image/svg+xml');
const paths = doc.getElementsByTagName('path');

for (let i = 0; i < paths.length; i++) {
  const path = paths[i];
  const name = path.getAttribute('name')?.trim() || '';
  if (name) {
    path.setAttribute('id', name);
    path.setAttribute('name', name);
    path.setAttribute('onmouseover', `displayName('${name}')`);
  }
}

const serializer = new XMLSerializer();
const updatedSvg = serializer.serializeToString(doc);
fs.writeFileSync('./updated-map.svg', updatedSvg, 'utf8');

方案2：前端运行时修改（适合无法修改原SVG文件的场景） #

如果只能在网页中加载SVG后修改，用原生JavaScript遍历处理即可，querySelectorAll返回的NodeList会严格按照文档顺序排列，不会打乱元素顺序：

// 等待SVG加载完成后执行
document.addEventListener('DOMContentLoaded', () => {
  const paths = document.querySelectorAll('path');
  
  paths.forEach(path => {
    const name = path.getAttribute('name')?.trim() || '';
    if (!name) return;
    
    path.setAttribute('id', name);
    path.setAttribute('name', name);
    path.setAttribute('onmouseover', `displayName('${name}')`);
  });
});

优化：简化Tooltip绑定逻辑 #

原代码中事件绑定可以和属性修改合并，避免重复遍历，同时替换内联onmouseover为事件监听，更灵活：

document.addEventListener('DOMContentLoaded', () => {
  const tooltip = document.getElementById('area-name');
  const paths = document.querySelectorAll('path.county');
  
  paths.forEach(path => {
    const name = path.getAttribute('name')?.trim() || '';
    if (!name) return;
    
    // 执行属性修改
    path.setAttribute('id', name);
    path.setAttribute('name', name);
    
    // 替换内联事件为监听
    path.removeAttribute('onmouseover');
    path.addEventListener('mouseover', () => displayName(name));
    path.addEventListener('mousemove', showTooltip);
    path.addEventListener('mouseout', () => {
      hideTooltip();
      displayName('');
    });
  });
  
  function showTooltip() {
    tooltip.setAttributeNS(null, 'visibility', 'visible');
  }
  
  function hideTooltip() {
    tooltip.setAttributeNS(null, 'visibility', 'hidden');
  }
  
  function displayName(name) {
    const textNode = tooltip.firstChild || document.createTextNode('');
    textNode.data = name;
    if (!tooltip.firstChild) tooltip.appendChild(textNode);
  }
});

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