SVG路径条件着色时id转换导致元素查找失败的问题求助

核心问题是你把带前导零的ID（比如'05'）转成了数字5，但SVG里的元素ID是字符串类型的'05'，document.getElementById()只能匹配完全一致的字符串ID，用数字5去查找自然找不到元素，导致后续调用setAttribute时报错。

另外，即使ID处理正确，也要确保代码在DOM完全加载后执行，不然SVG元素还没被浏览器解析，同样会出现找不到元素的情况。

修复后的代码 #

const date = [
  { id: '22', name: 'Алтайский край', value: 29 },
  { id: '42', name: 'Кемеровская область - Кузбасс', value: 43 },
  { id: '65', name: 'Сахалинская область', value: 32 },
  { id: '75', name: 'Забайкальский край', value: 28 },
  { id: '05', name: 'Республика Дагестан', value: 45 }
];

// 确保DOM加载完成后再执行代码
document.addEventListener('DOMContentLoaded', () => {
  for (let item of date) {
    // 直接使用原始的字符串ID，不要转成数字
    const element = document.getElementById(item.id);
    // 先判断元素是否存在，再执行着色操作
    if (item.value > 24 && item.value < 50 && element) {
      element.setAttribute('fill', '#f7a35c');
    }
  }
});

关键改动说明 #

• 保留ID的字符串类型：直接用item.id（原始字符串）查找元素，确保和SVG里的ID完全匹配。
• DOMContentLoaded监听：把代码放在这个事件回调里，保证SVG元素已经被浏览器渲染到DOM中，不会出现提前执行找不到元素的情况。
• 增加元素存在判断：在调用setAttribute前先检查element是否存在，避免因为意外的找不到元素而抛出错误。

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