如何访问HTML <object> 标签内加载的外部SVG文件

前提说明 #

• 首先必须满足同源策略：外部SVG的域名、协议、端口必须和你的页面完全一致，否则浏览器出于安全限制会禁止访问<object>内部的DOM。如果SVG服务端配置了允许你所在域名的CORS规则，可以用下方的第二种fetch方案绕过object的跨域限制。

方案1：原生JS操作<object>加载的SVG #

该方案完全兼容你现有的代码写法，核心逻辑是必须等<object>完全加载完成后再读取内部DOM：

1. 可以先给object元素加个id方便选择（也可以用属性、类名等其他选择器匹配，非必须）：

<object id="kiwi-svg" data="https://assets.codepen.io/3/kiwi.svg" />

2. 编写JS逻辑，监听加载事件后操作内部元素：

const svgObject = document.getElementById('kiwi-svg');
// 监听加载完成事件，避免SVG还没加载完拿不到DOM
svgObject.addEventListener('load', function() {
  // 获取object内部的文档对象
  const svgDoc = svgObject.contentDocument;
  // 获取根SVG元素
  const svgRoot = svgDoc.documentElement;
  
  // 这里就可以正常操作SVG内部的所有元素了，不需要原SVG提前加id
  // 示例1：修改所有路径的填充色为红色
  const allPaths = svgRoot.querySelectorAll('path');
  allPaths.forEach(path => {
    path.setAttribute('fill', '#ff0000');
  });
  // 示例2：修改所有黑色描边圆形的描边宽度
  const circles = svgRoot.querySelectorAll('circle[stroke="#000"]');
  circles.forEach(circle => {
    circle.setAttribute('stroke-width', '2');
  });
});

方案2：CORS允许时直接拉取SVG转为内联（操作更灵活） #

如果外部SVG的服务端配置了CORS规则允许跨域访问，可以直接把SVG内容拉取后插入页面，不需要依赖object，操作逻辑和普通DOM完全一致：

async function loadAndModifySvg(svgUrl, containerId) {
  const res = await fetch(svgUrl);
  const svgText = await res.text();
  const container = document.getElementById(containerId);
  container.innerHTML = svgText;
  // 直接操作页面内的SVG元素即可
  const svgRoot = container.querySelector('svg');
  svgRoot.setAttribute('width', '200px');
  // 其他修改逻辑和普通DOM操作完全一致
}
// 调用示例，假设页面有个id为svg-container的容器用于存放SVG
loadAndModifySvg('https://assets.codepen.io/3/kiwi.svg', 'svg-container');

常见问题排查 #

• 如果contentDocument返回null：大概率是SVG还没加载完成，必须在load事件触发后再操作，不要在页面初始化的同步代码里直接读取。
• 控制台报跨域错误：要么确保SVG和页面同源，要么联系SVG提供方配置CORS规则允许你的域名访问。

内容的提问来源于stack exchange，提问作者Why u do dis