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

Question

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

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

我想知道是否有人可以让我走上正确的道路，如何使用 vanilla JS 来做到这一点？

更新:这并不是具体如何编辑 SVG 颜色，更多的是如何使用 JS 来确定某个区域何时滚动到以及如何在该部分从深色变为深色时更改 SVG 的颜色光，反之亦然。

谢谢

Answer 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>