通过DOM操作修改SVG线条stroke描边颜色不生效如何解决

你当前的stroke属性定义在

方法一：直接修改line元素的stroke属性 #

不需要修改现有SVG结构，直接调整JS选择器选中子元素即可，同时优化了原React事件绑定逻辑避免内存泄漏：

useEffect(() => {
  const scrollFunction = () => {
    const lineEl = document.querySelector("#svg line")
    if (!lineEl) return
    if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
      document.getElementById("header").style.background = "red";
      document.getElementById("header").style.transition = "0.70s";
      document.getElementById("logotext").style.color = "white";
      lineEl.setAttribute("stroke","red")
    } else {
      document.getElementById("header").style.background = "";
      lineEl.setAttribute("stroke","#FF0A0A")
    }
  }
  window.addEventListener('scroll', scrollFunction)
  // 组件卸载时解绑事件避免内存泄漏
  return () => window.removeEventListener('scroll', scrollFunction)
}, []) // 空依赖确保只绑定一次事件

方法二：调整SVG结构把stroke属性移到外层 #

修改你的SVG代码，将上的stroke属性挪到

<svg id="svg" width="4" height="71" viewBox="0 0 4 71" fill="none" stroke="#FF0A0A" xmlns="http://www.w3.org/2000/svg">
  <line x1="2.49985" y1="0.0214264" x2="1.49985" y2="70.0214" stroke-width="8"/>
</svg>

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