如何在SVG中参数化polyline元素ID以批量设置opacity属性

方法1：通过window对象访问全局变量 #

你之前的写法是受PHP等语言变量插值逻辑影响，JS里不支持这种语法。全局声明的DOM元素变量会自动挂载到window对象上，因此可以用模板字符串拼接变量名，通过window[变量名字符串]获取对应元素：

// 按需重置同系列其他元素的透明度（可选操作）
for (let i = 1; i <= 30; i++) { // 把30替换成你实际的元素总数
  window[`polyline_element_1_${i}`].setAttribute('opacity', 0);
}
// 设置目标元素的透明度为1
window[`polyline_element_1_${n}`].setAttribute('opacity', 1);

方法2：更优雅的DOM选择器方案（推荐） #

如果可以修改SVG代码，给这些polyline元素添加统一类名和自定义属性，比如：

<polyline class="group-1-polyline" data-seq="1" ... />
<polyline class="group-1-polyline" data-seq="2" ... />
<polyline class="group-1-polyline" data-seq="3" ... />

之后直接用DOM选择器定位元素，无需依赖全局变量：

// 重置所有同组元素的透明度
document.querySelectorAll('.group-1-polyline').forEach(line => {
  line.setAttribute('opacity', 0);
});
// 找到对应n的元素并设置透明度
const target = document.querySelector(`.group-1-polyline[data-seq="${n}"]`);
if (target) {
  target.setAttribute('opacity', 1);
}

方法3：提前将元素存入数组 #

如果不想修改SVG，也可以提前把所有相关元素存入数组，后续通过索引直接访问：

// 初始化数组，存入所有目标元素
const polylineGroup1 = [
  polyline_element_1_1,
  polyline_element_1_2,
  polyline_element_1_3,
  // ... 依次添加其他元素
];

// 重置所有元素透明度
polylineGroup1.forEach(line => line.setAttribute('opacity', 0));
// 设置目标元素（注意数组索引从0开始，若n从1计数需减1）
polylineGroup1[n - 1].setAttribute('opacity', 1);

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