SVG路径设置className不生效，滚动页面时无法隐藏V形图标

问题原因 #

• 操作的DOM对象错误：你当前JS选中的是SVG内部的<path>子元素，但实际带固定定位、需要控制显隐的是外层<svg>元素（id为down-accelerate），修改子元素的属性自然不会影响整体图标的显示。
• 类名赋值逻辑颠倒：你的hide类是控制隐藏的样式，但代码里滚动时给元素清空类名、回到顶部反而加hide类，和需求完全相反。
• 冗余的显隐控制：同时修改className和hidden属性属于重复操作，容易出现样式冲突，选其中一种方式即可。

修正方案 #

直接修改JS代码即可，调整选中的元素和类名操作逻辑，推荐使用classList API来操作类，避免覆盖其他可能存在的类名：

// 选中外层svg元素
const chevron = document.getElementById("down-accelerate");

window.addEventListener("scroll", () => {
  const scrollY = window.scrollY;
  if (scrollY >= 1) {
    // 向下滚动后添加hide类隐藏
    chevron.classList.add("hide");
  } else {
    // 回到顶部移除hide类显示
    chevron.classList.remove("hide");
  }
});

如果要继续用hidden属性也可以，完全删掉CSS里的hide类相关代码，直接修改hidden属性即可，两种方式二选一，不要混用。

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