如何替换页面中通过SVGInject加载的内联SVG元素为新文件内容

问题原因 #

SVGInject的核心运行逻辑是：当img标签加载SVG完成后，会直接把原有的<img>元素替换成内联的<svg> DOM节点。你第一次调用SVGInject(this)之后，页面上原来id为changeme的img元素已经不存在了，后续通过document.getElementById('changeme')根本无法获取到目标元素，自然修改src和再次调用SVGInject都不会生效。

可行解决方案 #

不需要销毁重建整个页面关联对象，用下面两种常用方案即可实现SVG动态替换：

方案1：继承ID后重建img元素 #

你可以配置SVGInject让生成的SVG继承原img的ID属性，每次替换前先删除当前ID对应的元素，再插入新的img标签加载新SVG：

// 全局配置SVGInject，让生成的svg元素继承原img的id
SVGInject.setOptions({
  copyAttributes: (img) => ['id']
})

// 封装替换方法
function replaceSvg(newSvgPath) {
  const oldEl = document.getElementById('changeme')
  if (oldEl) oldEl.remove()
  // 创建新img元素
  const newImg = document.createElement('img')
  newImg.id = 'changeme'
  newImg.src = newSvgPath
  // 插入到原元素的父容器中，这里可替换为你实际的父节点选择器
  document.body.appendChild(newImg)
  SVGInject(newImg)
}

// 调用示例
replaceSvg('image2.svg')

方案2：外层套固定容器（更简单） #

提前给SVG预留一个固定ID的容器，每次替换直接清空容器内容再插入新img即可，不需要处理ID继承逻辑：

<!-- 页面提前写入固定容器 -->
<div id="svg-wrapper"></div>

// 封装加载方法
function loadSvg(svgPath) {
  const wrapper = document.getElementById('svg-wrapper')
  wrapper.innerHTML = ''
  const img = document.createElement('img')
  img.src = svgPath
  wrapper.appendChild(img)
  SVGInject(img)
}

// 初始加载
loadSvg('image1.svg')
// 替换加载
loadSvg('image2.svg')

内容的提问来源于stack exchange，提问作者Hans Otto Lunde