如何使用 vanilla Javascript 动态更改内联 SVG 的颜色？答案

【问题标题】：How to dynamically change the colour of an inline SVG using vanilla Javascript?如何使用 vanilla Javascript 动态更改内联 SVG 的颜色？
【发布时间】：2020-09-27 20:11:41
【问题描述】：

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

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

我想知道是否有人可以让我在正确的轨道上使用 vanilla JS 做到这一点？

更新：这不是具体如何编辑 SVG 颜色，它更多的是关于如何使用 JS 来确定区域何时被滚动到并在该部分从黑暗变为的点更改 SVG 的颜色点亮，反之亦然。

谢谢

【问题讨论】：

这能回答你的问题吗？ Editing SVG styles from javascript
顺便说一句，我通常做的是谷歌搜索我的问题，而且大多数时候前 3 个结果中有一个 Stackoverflow 链接。
我了解如何使用 CSS 编辑 SVG，更具体地说，是如何设置 JS 以在您滚动时检测固定定位的徽标何时在其后面有亮或暗部分，所以想象一个固定的logo 左上角和六个全宽部分，有黑色背景或白色背景，当用户向下滚动时，logo 会相应更改。我不相信您发布的链接具体解释了这一点。
查找滚动间谍。这就是你需要知道的事件

标签： javascript html css

【解决方案1】：

如果您能够选择部分并且您知道哪些部分是深色或浅色，那么您可以使用滚动事件来检查目标元素（svg）是否在特定部分内并基于该部分的背景（类）部分更改 svg 元素的类。

function offset(element) {
  const bodyRect = document.body.getBoundingClientRect()
  const elemRect = element.getBoundingClientRect()
  return elemRect.top - bodyRect.top;
}

function handler(event) {
  const header = document.querySelector('.logo');
  const dark = document.querySelectorAll('.dark-section');

  const headerOffset = offset(header)
  const headerHeight = header.clientHeight;

  const check = [...dark].some(section => {
    const sectionOffset = offset(section);
    const sectionHeight = section.clientHeight;

    const topCheck = headerOffset + headerHeight / 2 >= sectionOffset;
    const bottomCheck = headerOffset + headerHeight / 2 < sectionOffset + sectionHeight

    if (topCheck && bottomCheck) {
      return true
    }
  })

  if (check) {
    header.classList.add('light')
    header.classList.remove('dark')
  } else {
    header.classList.add('dark')
    header.classList.remove('light')
  }
}

['scroll', 'resize'].forEach(function(e) {
  window.addEventListener(e, handler);
});

body,
html {
  margin: 0;
  padding: 0;
}

header {
  height: 50px;
  position: fixed;
  background: rgba(51, 51, 5, 0.25);
  left: 0;
  top: 0;
  width: 100%;
}

svg {
  height: 50px;
  width: 50px;
}

section {
  min-height: 100vh;
}

section.dark-section {
  background: black;
}

.light circle {
  fill: white;
  transition: all 0.2s ease-in;
}

.dark circle {
  fill: black;
  transition: all 0.2s ease-in;
}

<header>
  <svg class="logo">
    <circle fill="white" cx="50%" cy="50%" r="15"/>
  </svg>
</header>

<section class="dark-section"></section>
<section></section>
<section class="dark-section"></section>
<section></section>

您也可以在 css 中使用 mix-blend-mode: difference 执行类似的操作，但 svg 的颜色将取决于该部分的颜色，因此您不能仅将其设置为更改为特定颜色。

body,
html {
  margin: 0;
  padding: 0;
}

section {
  height: 100vh;
  background-color: white;
}

section.dark-section {
  background-color: black;
}

header {
  mix-blend-mode: difference;
  width: 100%;
  position: fixed;
  background: none;
  border: none;
  padding: 0;
  top: 0;
  left: 0;
}

svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
}

.light-svg {
  display: block;
}

.dark-svg {
  display: none;
}

<header>
  <svg class="logo">
    <circle fill-rule="nonzero" fill="#FFFFFF" cx="50%" cy="50%" r="15"/>
  </svg>
</header>

<section class="dark-section"></section>
<section></section>
<section class="dark-section"></section>
<section></section>

【讨论】：