如何用JavaScript动态修改SVG文件内元素的颜色？

问题 #

我通过<object>标签加载了一个复杂的SVG文件（无法内联嵌入），SVG内有两个带唯一ID的元素COLOR1和COLOR2，默认填充色分别为红色和黄色。现在需要在页面加载时，用原生JavaScript根据数据库值修改这两个元素的填充色（比如改为绿色和蓝色）。

当前加载SVG的代码：

<object id="Soldier" type="image/svg+xml" data="ProvaSVG.svg" width="400" height="400">
  <param name="src" value="ProvaSVG.svg">
</object>

之前尝试的写法无效：

Soldier.COLOR1.fill='Green';
Soldier.COLOR2.fill='Blue';

解决方案 #

要修改<object>内SVG元素的样式，必须先等待SVG加载完成，再获取其内部文档对象，之后才能定位元素修改属性。

单个SVG的处理方法 #

1. 监听<object>的load事件，确保SVG完全加载后再执行操作
2. 通过contentDocument属性获取SVG的内部文档
3. 用getElementById定位目标元素，修改fill属性

代码示例：

// 获取object元素
const soldierSvg = document.getElementById('Soldier');

// 监听SVG加载完成事件
soldierSvg.addEventListener('load', function() {
  // 获取SVG内部文档对象
  const svgDoc = this.contentDocument;
  if (!svgDoc) return; // 兼容部分浏览器的异常情况

  // 定位并修改元素填充色
  const color1 = svgDoc.getElementById('COLOR1');
  const color2 = svgDoc.getElementById('COLOR2');
  
  if (color1) color1.setAttribute('fill', 'green');
  if (color2) color2.setAttribute('fill', 'blue');
});

多个同类SVG的批量处理 #

如果页面后续会加载多个同类SVG，可以给它们统一添加类名（比如custom-svg），然后循环处理：

<object class="custom-svg" type="image/svg+xml" data="ProvaSVG.svg" width="400" height="400">
  <param name="src" value="ProvaSVG.svg">
</object>
<object class="custom-svg" type="image/svg+xml" data="AnotherSVG.svg" width="400" height="400">
  <param name="src" value="AnotherSVG.svg">
</object>

// 获取所有目标SVG对象
const svgObjects = document.querySelectorAll('.custom-svg');

svgObjects.forEach(svgObj => {
  svgObj.addEventListener('load', function() {
    const svgDoc = this.contentDocument;
    if (!svgDoc) return;

    const color1 = svgDoc.getElementById('COLOR1');
    const color2 = svgDoc.getElementById('COLOR2');
    
    // 这里可以根据不同SVG的需求传入不同颜色值，比如从数据库获取对应数据
    if (color1) color1.setAttribute('fill', '#00ff00'); // 绿色
    if (color2) color2.setAttribute('fill', '#0000ff'); // 蓝色
  });
});

注意事项 #

• 确保SVG文件和HTML页面同域，否则会因为跨域安全限制无法访问SVG内部文档
• 用setAttribute('fill', 颜色值)比直接修改fill属性更兼容所有浏览器
• 必须等待load事件触发后再操作，否则SVG还未加载完成，无法定位到内部元素

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