如何访问通过GSAP创建的SVG圆形元素的fill填充颜色属性

HTML代码 #

<div class="dots" id="dotsSlider">
    <svg xmlns="http://www.w3.org/2000/svg" width="200" height="30" viewBox="0 0 400 60" id="ante">
    <rect width="100%" height="100%" fill="none" />
    </svg>
</div>

JavaScript代码 #

for (let i = 0; i < 10; i++) {
    const svgns = "http://www.w3.org/2000/svg";
    var svg = document.querySelector("svg");

    var x = i.toString();
    var name = "newCircle" + x;
    var name2 = name;
    var counter = i + 1;
    var position = 36 * counter;

    var name = document.createElementNS(svgns, "circle");
    gsap.set(name, {attr: {
      cx: position, 
      cy: 25, 
      r: 8, 
      width: 30, 
      height: 30, 
      fill: "black",
      id: name2
    }});
    svg.appendChild(name);
}

上述代码封装在页面加载触发的函数中，可成功生成10个SVG圆形作为滑块导航点，但无法在其他函数中访问这些圆形的fill属性完成动态修改，尝试所有getElement相关方法均无法成功获取元素。

• 确认执行时机：所有访问SVG圆形的代码必须晚于圆形生成逻辑执行。如果你的访问逻辑写在页面加载完成前，此时对应DOM还未生成，自然无法获取元素。可以将访问逻辑也绑定到DOMContentLoaded或window.load事件中，或者在触发修改逻辑时再实时查询元素，不要提前在全局作用域初始化存储元素的变量。
• 使用正确的选择器获取元素：SVG元素支持常规DOM选择器，可通过以下方式获取：
  按ID获取单个圆形：const targetDot = document.getElementById('newCircle1')（ID规则为newCircle拼接0-9的索引）
  批量获取所有圆形：const allDots = document.querySelectorAll('#ante circle')
• 采用正确的fill属性修改方式：针对你用attr初始化fill的场景，以下两种修改方式都可生效：

  // 方式1：直接修改元素属性
  targetDot.setAttribute('fill', '#ff0000')
  // 方式2：修改行内样式
  targetDot.style.fill = '#ff0000'
  // 如果你继续使用GSAP操作，可直接按如下写法
  gsap.to(targetDot, {attr: {fill: '#ff0000'}, duration: 0.2})
  

• 更优实践：生成时缓存元素列表，避免重复查询DOM。你可以在全局作用域声明一个空数组存储所有圆形元素，生成时逐个推入数组，后续其他函数直接通过索引访问即可：

  // 全局作用域声明存储数组
  const sliderDots = []
  // 原有生成逻辑末尾添加一行代码
  svg.appendChild(name)
  sliderDots.push(name) // 新增该行
  // 其他函数中直接通过索引访问修改
  sliderDots[2].setAttribute('fill', 'green')
  

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