如何用JavaScript批量修改同id图片的SVG路径（替换outline为filled）

现有代码的核心问题 #

• 多元素重复使用同一个id="changeimg"不符合HTML规范，常规#changeimg选择器仅能匹配到页面第一个带该id的元素，无法选中全部待切换图片
• 代码中未定义imgname变量，缺少从单张图片自身路径提取文件名的逻辑，无法动态生成对应新路径
• 缺少遍历全部待切换图片的流程，不能实现多图同步更新

原生JS实现代码（无第三方依赖） #

直接替换原有按钮的点击逻辑即可：

document.querySelector('.btn').addEventListener('click', function() {
  // 选中所有带changeimg标识的图片元素
  const targetImgs = document.querySelectorAll('[id="changeimg"]');
  targetImgs.forEach(img => {
    const originalPath = img.getAttribute('src');
    // 直接替换路径中的标识段，无需手动拼接完整路径
    const newPath = originalPath.replace('outline-', 'filled-');
    img.setAttribute('src', newPath);
  })
})

相比手动提取两个固定分隔符之间的文件名的方案，直接替换路径中固定分段的方式容错性更高，只要遵循outline-xxx.svg的命名规则，不管文件名叫什么，都能正确生成对应filled版本的路径，不需要针对每张图单独写匹配逻辑。比如原路径/assets/images/svg/outline-shape.svg会自动替换为/assets/images/svg/filled-shape.svg，/assets/images/svg/outline-img1.svg会自动替换为/assets/images/svg/filled-img1.svg，完全匹配切换要求。

兼容现有jQuery环境的实现代码 #

匹配你当前页面引入jQuery的代码结构，直接替换即可：

document.querySelector('.btn').addEventListener('click', function() {
  // 选中所有带changeimg标识的图片
  $('[id="changeimg"]').each(function() {
    const originalPath = $(this).attr('src');
    const newPath = originalPath.replace('outline-', 'filled-');
    $(this).attr('src', newPath);
  })
})

可扩展优化 #

• 更合规的写法：把重复的id="changeimg"调整为class="changeimg"，后续选择器对应改为.changeimg，完全符合HTML的id唯一性规范，不会出现选择器匹配不全的问题
• 双向切换扩展：如果需要点击按钮在outline和filled两种状态来回切换，可在路径替换逻辑里增加状态判断：

  const newPath = originalPath.includes('outline-') 
    ? originalPath.replace('outline-', 'filled-') 
    : originalPath.replace('filled-', 'outline-');
  

  不需要额外记录切换状态，直接根据当前图片的src判断要替换的内容即可。

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