如何使用Javascript将SVG文件导入到同一页面的多个div中

• HTML 规范要求同一个页面内的id属性必须全局唯一，document.getElementById('output')只会匹配页面中第一个出现的对应 id 元素，因此其余 div 内的 img 标签不会被更新。

HTML 部分 #

将重复的 id 替换为 class 即可：

<h1>Import file</h1>
<input type="file" id="file-selector">
<p id="status"></p>

<div>
  <img class="output">
</div>
<div>
  <img class="output">
</div>
<div>
  <img class="output">
</div>

JS 部分 #

修改为选中所有 class 为 output 的元素，读取文件后遍历赋值资源地址：

const status = document.getElementById('status');
// 获取所有需要加载SVG的img元素
const outputList = document.querySelectorAll('.output');
if (window.FileList && window.File && window.FileReader) {
  document.getElementById('file-selector').addEventListener('change', event => {
    // 先清空所有原有资源
    outputList.forEach(img => img.src = '');
    status.textContent = '';
    const file = event.target.files[0];
    if (!file.type) {
      status.textContent = 'Error: The File.type property does not appear to be supported on this browser.';
      return;
    }
    if (!file.type.match('image.*')) {
      status.textContent = 'Error: The selected file does not appear to be an image.'
      return;
    }
    const reader = new FileReader();
    reader.addEventListener('load', event => {
      // 给所有img元素赋值导入的SVG资源
      outputList.forEach(img => img.src = event.target.result);
    });
    reader.readAsDataURL(file);
  });
}

如果你后续需要操作导入的SVG内部DOM节点，不能使用img标签加载，需要改用object、embed标签或者直接将SVG代码内联到页面中。

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