如何使用普通Javascript动态更改内联SVG的颜色？

我有一个简单的内嵌SVG徽标，它都是黑色的，在我的CSS中我可以调整颜色，但是，我想知道如何在用户向下滚动页面时动态更改徽标的颜色。让我详细说明一下

所以我有一个简单的网站，在任何给定的页面上有两个部分的圆锥曲线，顺序不同，一个部分有黑色背景和白色文本，另一个，你猜到了，白色背景和黑色文本。我有一个黑暗和光明的类分别分配给每个部分。当用户从深色部分滚动到浅色部分（反之亦然）时，我希望切换适当的徽标颜色

我想知道是否有人能让我走上正确的道路，如何使用vanilla JS实现这一点

更新：这不是如何编辑SVG颜色的具体问题，而是如何使用JS来确定何时滚动到某个区域，以及在该区域从暗变亮或从暗变亮时更改SVG的颜色

---

谢谢

如果您能够选择部分，并且知道哪些部分是暗的或亮的，那么您可以使用scroll事件检查目标元素（svg）是否在特定部分内，并根据该部分的背景（类）更改svg元素的类

功能偏移量（元素）{
const bodyRect=document.body.getBoundingClientRect（）
const elemRect=element.getBoundingClientRect（）
返回elemRect.top-bodyRect.top；
}
函数处理程序（事件）{
const header=document.querySelector（'.logo'）；
const dark=document.queryselectoral（“.dark节”）；
常数头偏移=偏移量（头）
const headerHeight=header.clientHeight；
常量检查=[…暗]。一些（部分=>{
const sectionOffset=偏移量（截面）；
const section height=section.clientHeight；
const topCheck=车头偏移+车头高度/2>=截面偏移；
常量底部检查=头部偏移+头部高度/2<截面偏移+截面高度
如果（顶部检查和底部检查）{
返回真值
}
})
如果（检查）{
header.classList.add（'light'）
header.classList.remove（'dark'）
}否则{
header.classList.add（'dark'）
header.classList.remove（'light'）
}
}
['scroll'，'resize'].forEach（函数（e）{
addEventListener（e，handler）；
});
body，
html{
保证金：0；
填充：0；
}
标题{
高度：50px；
位置：固定；
背景：rgba（51,51,5,0.25）；
左：0；
排名：0；
宽度：100%；
}
svg{
高度：50px；
宽度：50px；
}
部分{
最小高度：100vh；
}
剖面图{
背景：黑色；
}
.光圈{
填充物：白色；
过渡：所有0.2秒缓进；
}
.黑圈{
填充：黑色；
过渡：所有0.2秒缓进；
}

这是否回答了您的问题？顺便说一句，我通常做的是谷歌搜索我的问题，大多数情况下，前3个结果中有一个Stackoverflow链接。我了解如何使用CSS编辑SVG，更具体的是如何设置JS，以便在滚动时检测固定位置的徽标后面是否有亮或暗的部分，因此，想象一下左上角有一个固定的徽标和六个全宽部分，它们要么是黑色背景，要么是白色背景，当用户向下滚动时，徽标会相应地改变。我不相信你发布的链接对此有明确的解释。请查阅scroll spy。这是你需要了解的事件