如何使用JavaScript修改HTML页面中SVG文件指定元素的属性

结论 #

这个需求完全可以实现，你之前操作失效主要是两个原因：一是img标签渲染的SVG处于浏览器的DOM隔离机制中，JavaScript无法访问其内部节点；二是用object标签时没有等待SVG资源加载完成就执行操作，或者存在跨域限制。

方案1：内联SVG嵌入（最稳定，优先推荐） #

直接把SVG文件的源代码复制粘贴到HTML中，SVG内部节点会直接成为页面DOM的一部分，可以直接用JS操作，没有跨域问题，适合SVG体积不大的场景。
示例代码：

<!-- 直接嵌入SVG代码 -->
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- 你的目标元素，假设id为target-shape -->
  <rect id="target-shape" x="20" y="20" width="160" height="160" fill="#000000" />
</svg>

<script>
// 直接通过id获取元素
const target = document.getElementById('target-shape')
// 添加白色fill样式
target.style.fill = '#FFFFFF'
// 后续移除属性直接赋值为空即可
// target.style.fill = ''
</script>

方案2：object标签加载外部SVG #

如果SVG是独立的外部文件，可以用object标签加载，注意必须监听load事件确保SVG加载完成后再操作，且SVG文件必须和当前页面同域。
示例代码：

<object id="external-svg" data="你的SVG文件路径.svg" type="image/svg+xml" width="200" height="200"></object>

<script>
const svgObj = document.getElementById('external-svg')
svgObj.addEventListener('load', () => {
  // 获取SVG内部的文档对象
  const svgDoc = svgObj.contentDocument
  // 定位目标元素
  const target = svgDoc.getElementById('你的目标元素id')
  if (target) {
    target.style.fill = '#FFFFFF'
    // 移除样式：target.style.fill = ''
  }
})
</script>

注意事项 #

• 如果你的SVG是自带fill属性而非通过style定义的，也可以用setAttribute('fill', '#FFFFFF')添加属性，removeAttribute('fill')移除属性。
• 跨域场景下无法直接通过object的contentDocument访问SVG内部，可先用fetch请求获取SVG的文本内容，再插入到页面中转为内联SVG即可操作。

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