如何访问HTML中<object>元素封装的SVG组件以修改颜色？

要修改<object>标签里的SVG颜色，核心是先拿到SVG所在的独立文档对象，再操作内部的SVG元素，具体步骤如下：

• 必须等SVG加载完成：<object>是异步加载外部资源的，没加载完时内部的SVG还不存在，所以得给它绑定load事件，确保资源加载完毕后再操作：

  <object id="mySvgObj" data="img/icons/some-svg.svg" type="image/svg+xml"></object>
  

  const svgObj = document.getElementById('mySvgObj');
  svgObj.addEventListener('load', function() {
    // 在这里写访问和修改SVG的代码
  });
  

• 获取SVG所在的文档对象：通过<object>的*contentDocument*属性，就能拿到它内部封装的#document，接着就能获取到SVG元素了：

  const svgDoc = svgObj.contentDocument;
  const svgElement = svgDoc.querySelector('svg');
  

• 修改颜色的具体操作：

  • 要是想给整个SVG统一设置填充色，直接修改SVG元素的fill属性或者CSS样式就行：

    // 修改属性
    svgElement.setAttribute('fill', '#ff0000');
    // 或者用CSS样式
    svgElement.style.fill = '#ff0000';
    

  • 如果要修改SVG内部特定元素（比如某个<path>）的颜色，用选择器定位到目标元素后再修改：

    const targetPath = svgDoc.querySelector('path#target-path');
    targetPath.style.fill = '#00ff00';
    

• 注意跨域问题：如果SVG文件和当前页面不在同一域名（包括子域名、协议、端口不同），浏览器会出于安全限制禁止你访问contentDocument，这种情况要么把SVG直接内联到页面里，要么在服务器端配置跨域允许规则。

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