如何用JavaScript修改SVG中指定class的path填充颜色？

我需要编写JavaScript函数，批量修改通过<object>标签引入的SVG中所有带有特定class（例如Argentina）的<path>元素的填充颜色。已知直接在path标签内添加style="fill: green"可以生效，但希望通过JS实现批量处理。

当前SVG的HTML引入代码：

<object id="color-change-svg" data="../img/world.svg" type="image/svg+xml"></object>

SVG片段示例：

<svg baseprofile="tiny" fill="#ececec" height="857" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width=".2" version="1.2" viewbox="0 0 2000 857" width="2000" xmlns="http://www.w3.org/2000/svg">
  <path d="M1383 261.6l1.5 1.8-2.9 0.8-2.4 1.1-5.9 0.8-5.3 1.3-2.4 2.8 1.9 2.7 1.4 3.2-2 2.7 0.8 2.5-0.9 2.3-5.2-0.2 3.1 4.2-3.1 1.7-1.4 3.8 1.1 3.9-1.8 1.8-2.1-0.6-4 0.9-0.2 1.7-4.1 0-2.3 3.7 0.8 5.4-6.6 2.7-3.9-0.6-0.9 1.4-3.4-0.8-5.3 1-9.6-3.3 3.9-5.8-1.1-4.1-4.3-1.1-1.2-4.1-2.7-5.1 1.6-3.5-2.5-1 0.5-4.7 0.6-8 5.9 2.5 3.9-0.9 0.4-2.9 4-0.9 2.6-2-0.2-5.1 4.2-1.3 0.3-2.2 2.9 1.7 1.6 0.2 3 0 4.3 1.4 1.8 0.7 3.4-2 2.1 1.2 0.9-2.9 3.2 0.1 0.6-0.9-0.2-2.6 1.7-2.2 3.3 1.4-0.1 2 1.7 0.3 0.9 5.4 2.7 2.1 1.5-1.4 2.2-0.6 2.5-2.9 3.8 0.5 5.4 0z" id="AF" name="Afghanistan"></path>
  ...
  <path d="M1633.1 472.8l2.2-2.4 4.6-3.6-0.1 3.2-0.1 4.1-2.7-0.2-1.1 2.2-2.8-3.3z" id="BN" name="Brunei Darussalam"></path>
</svg>

由于SVG是通过<object>引入的外部资源，必须等待其完全加载后才能操作内部元素，否则无法获取SVG文档对象。具体实现步骤如下：

1. 监听SVG加载完成事件 #

给<object>元素绑定load事件，确保在SVG加载完成后执行修改逻辑。

2. 获取SVG内部文档 #

通过object.contentDocument获取SVG的文档对象，这是操作内部元素的核心入口。

3. 批量修改目标元素样式 #

使用querySelectorAll选中所有带有指定class的<path>，遍历并设置style.fill属性。

完整代码 #

const svgObject = document.getElementById('color-change-svg');

svgObject.addEventListener('load', () => {
  const svgDoc = svgObject.contentDocument;
  if (!svgDoc) {
    console.error('无法访问SVG文档，可能存在跨域限制');
    return;
  }

  // 可自定义目标class和填充色
  const targetClass = 'Argentina';
  const fillColor = 'green';

  const targetPaths = svgDoc.querySelectorAll(`path.${targetClass}`);
  targetPaths.forEach(path => {
    path.style.fill = fillColor;
  });
});

关键注意事项 #

• 跨域限制：如果SVG文件与当前HTML页面不同源（域名、端口、协议不一致），浏览器会阻止访问contentDocument。此时需要在服务器端配置CORS，或者将SVG直接嵌入HTML中（替换<object>为<svg>标签）。
• class有效性：确保SVG中的目标<path>元素确实包含指定class（例如class="Argentina"），否则无法被选中修改。

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