如何用JavaScript同步创建外部SVG文件的<svg>元素副本？

首先明确：同步实现是可行的，但同步网络请求会阻塞浏览器主线程——在SVG加载完成前，页面会完全卡住，用户没法做任何操作，所以这种方式只适合极端特殊场景，生产环境非常不推荐。不过既然你问了同步的方法，我先给你具体实现：

同步实现代码 #

用同步XMLHttpRequest来加载外部SVG，然后把内容注入到新创建的SVG元素中：

function syncCopyExternalSvg(svgPath) {
  // 创建同步XHR请求
  const xhr = new XMLHttpRequest();
  // 第三个参数设为false就是同步模式
  xhr.open('GET', svgPath, false);
  xhr.send();

  if (xhr.status === 200) {
    // 必须用SVG命名空间创建元素，否则浏览器不认
    const newSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    // 把加载到的SVG源码直接插入
    newSvg.innerHTML = xhr.responseText;
    // 可以给副本加个ID方便后续操作
    newSvg.id = 'copied-cursor';
    // 把副本挂载到页面上，这里挂到body，你也可以改目标容器
    document.body.appendChild(newSvg);
    return newSvg;
  } else {
    console.error('同步加载SVG失败:', xhr.statusText);
    return null;
  }
}

// 调用函数，传入你的SVG路径
const copiedCursor = syncCopyExternalSvg('svg/cursor.svg');

重要注意事项 #

• 跨域问题：如果你的SVG文件和HTML页面不在同一个域名下，同步XHR会被浏览器的跨域策略拦截，这时候需要在服务器端配置CORS。
• 性能影响：同步请求会阻塞主线程，页面在加载期间完全无响应，这对用户体验来说是致命的，所以尽量优先用异步方案。

更推荐的异步替代方案 #

如果可以接受异步加载（这是前端的最佳实践），用fetch API实现会更友好，完全不会阻塞页面：

async function asyncCopyExternalSvg(svgPath) {
  try {
    const response = await fetch(svgPath);
    const svgSource = await response.text();
    const newSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    newSvg.innerHTML = svgSource;
    newSvg.id = 'copied-cursor';
    document.body.appendChild(newSvg);
    return newSvg;
  } catch (err) {
    console.error('异步加载SVG失败:', err);
    return null;
  }
}

// 调用异步函数
asyncCopyExternalSvg('svg/cursor.svg');

另外补充一点：如果只是想展示SVG，用<img src="svg/cursor.svg">或者<object>标签更简单，但这种方式没法直接操作SVG内部的元素（比如你里面的animate动画），如果需要操作内部元素，就必须把SVG源码注入到DOM中，也就是上面两种方法的思路。

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