SVG子组件重复ID可行性及JS操作SVG元素问题求助

核心问题1：两个顶级SVG的子组件能否使用相同ID？ #

不行。HTML规范明确要求整个文档内的ID必须唯一，哪怕元素处于不同的SVG容器中也不例外。重复ID会导致全局选择器（比如document.getElementById()）只能返回第一个匹配的元素，同时可能引发样式冲突、脚本逻辑混乱等潜在问题。如果需要复用标识，建议改用class属性。

核心问题2：修改第一个SVG内图形颜色的代码为什么失效？ #

你的代码存在两个关键问题：

• 元素选择错误：firstChild和lastChild会包含SVG节点内的文本节点（比如换行、空格），你拿到的并不是目标<circle>和<rect>元素。
• 语法错误：setAttribute(('fill', '#ec3'))的写法有误，多了一层括号，正确的调用应该是setAttribute('fill', '#ec3')。

修复方案 #

步骤1：替换ID为Class（解决ID重复问题） #

把两个SVG内子元素的id改为class：

<svg id="theSVGOne" width="200" height="300" fill="#d55">
    <circle class="theCircle" cx="100" cy="75" r="50"
              stroke="firebrick" fill="#ddd" stroke-width="3" />
    <rect class="theRectangle" x="30" y="140" width="110" height="30" 
              stroke="black" fill="#ddd" stroke-width="3" />
</svg>
<svg id="theSVGTwo" width="200" height="200">
    <circle class="theCircle" cx="100" cy="75" r="50"
              stroke="firebrick" fill="#ddd" stroke-width="3" />
    <rect class="theRectangle" x="30" y="140" width="110" height="30" 
              stroke="black" fill="#ddd" stroke-width="3" />
</svg>

步骤2：修正JS代码（正确选择元素并修改样式） #

使用querySelector在指定SVG容器内精准选择子元素，同时修正setAttribute的语法：

let svgOne = document.getElementById('theSVGOne')
let statusPane = document.getElementById('status')
statusPane.innerHTML = 'svgOne => '+svgOne.childElementCount.toString()

// 精准选择第一个SVG内的圆形和矩形
let circOne = svgOne.querySelector('.theCircle')
let rctOne = svgOne.querySelector('.theRectangle')

// 修正setAttribute语法
circOne.setAttribute('fill', '#ec3')
rctOne.setAttribute('fill', '#e3c')

完整修复后的代码 #

<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<meta name=viewport content='width=device-width, initial-scale=1'>
<title>SVG-ID-Test</title>
</head>
<body>
<svg id="theSVGOne" width="200" height="300" fill="#d55">
    <circle class="theCircle" cx="100" cy="75" r="50"
              stroke="firebrick" fill="#ddd" stroke-width="3" />
    <rect class="theRectangle" x="30" y="140" width="110" height="30" 
              stroke="black" fill="#ddd" stroke-width="3" />
</svg>
<svg id="theSVGTwo" width="200" height="200">
    <circle class="theCircle" cx="100" cy="75" r="50"
              stroke="firebrick" fill="#ddd" stroke-width="3" />
    <rect class="theRectangle" x="30" y="140" width="110" height="30" 
              stroke="black" fill="#ddd" stroke-width="3" />
</svg>
<div id="status"></div>
<script type='text/javascript'>
  let svgOne = document.getElementById('theSVGOne')
  let statusPane = document.getElementById('status')
  statusPane.innerHTML = 'svgOne => '+svgOne.childElementCount.toString()
  
  let circOne = svgOne.querySelector('.theCircle')
  let rctOne = svgOne.querySelector('.theRectangle')
  
  circOne.setAttribute('fill', '#ec3')
  rctOne.setAttribute('fill', '#e3c')
</script>
</body>

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