javascript - 不同部分中 svg 的流体颜色变化

Question

我正在尝试根据其当前部分背景更改 SVG 的颜色......它使用形状但是一旦我将它更改为路径它就会跳跃颜色而不是流体变化......为什么那？

这就是我想要实现的(颜色的流畅过渡)

var sections = document.querySelectorAll('section');
var logo = document.querySelector('#logo');
var nextColor = document.querySelector('#nextColor');
var currentColor = document.querySelector('#currentColor');
var initialHeight = logo.clientHeight;
var lastScrollPosition = 0;

// Set current section color
sections.forEach(function (section) {
  var top = section.offsetTop - window.pageYOffset;
  if (top <= logo.offsetTop && (top + section.clientHeight) >= logo.offsetTop) {
    currentColor.setAttribute('fill', section.dataset.color);
  }
});

window.addEventListener('scroll', function () {
  sections.forEach(function (section) {
    var top = section.offsetTop - window.pageYOffset;
    var offset = top - logo.offsetTop;
    
    // If the top edge of the section is behind the logo
    if (top <= logo.offsetTop) {
      // Make sure the section color has its initial height
      currentColor.setAttribute('height', initialHeight);
      // If the logo is still inside the section, fill it with the section color
      var bottom = top + section.clientHeight;
      if (bottom >= logo.offsetTop) {
        currentColor.setAttribute('fill', section.dataset.color);
      }
      
      return;
    }
    
    // If logo collides with the lower section
    if (offset <= logo.clientHeight) {
      nextColor.setAttribute('fill', section.dataset.color);
      currentColor.setAttribute('height', offset);
    }
  });
});

#logo {
  position: fixed;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
}

section {
  height: 100vh
}

#dark {
  background-color: #2a2a2a;
}

<div id="logo">
  <svg height="100" width="100">
    <rect id="nextColor" width="100" height="100"/>
    <rect id="currentColor" y="0" width="100" height="100"/>
  </svg>
</div>

<div class="sections">
  <section data-color="#000000" id="light"></section>
  <section data-color="#ffffff" id="dark"></section>
  <section data-color="#cccccc" id="light2"></section>
</div>

这是我得到的，但它没有像上面的工作示例那样顺利过渡:

var sections = document.querySelectorAll('section');
var logo = document.querySelector('#logo');
var nextColor = document.querySelector('#nextColor');
var currentColor = document.querySelector('#currentColor');
var initialHeight = logo.clientHeight;
var lastScrollPosition = 0;

// Set current section color
sections.forEach(function (section) {
  var top = section.offsetTop - window.pageYOffset;
  if (top <= logo.offsetTop && (top + section.clientHeight) >= logo.offsetTop) {
    currentColor.setAttribute('fill', section.dataset.color);
  }
});

window.addEventListener('scroll', function () {
  sections.forEach(function (section) {
    var top = section.offsetTop - window.pageYOffset;
    var offset = top - logo.offsetTop;
    
    // If the top edge of the section is behind the logo
    if (top <= logo.offsetTop) {
      // Make sure the section color has its initial height
      currentColor.setAttribute('height', initialHeight);
      // If the logo is still inside the section, fill it with the section color
      var bottom = top + section.clientHeight;
      if (bottom >= logo.offsetTop) {
        currentColor.setAttribute('fill', section.dataset.color);
      }
      
      return;
    }
    
    // If logo collides with the lower section
    if (offset <= logo.clientHeight) {
      nextColor.setAttribute('fill', section.dataset.color);
      currentColor.setAttribute('height', offset);
    }
  });
});

#logo {
  position: fixed;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
}

section {
  height: 100vh
}

#blue {
  background-color: #b4da55;
}

<div id="logo">

  <svg height="48" xmlns="http://www.w3.org/2000/svg">
    
    <path height="48" id="nextColor" d="M5.8 0v36.3h10.7V48l25.6-11.7V0H5.8zm10.5"/>
    
    <path height="48" id="currentColor" y="0" d="M5.8 0v36.3h10.7V48l25.6-11.7V0H5.8zm10.5"/>
 
  </svg>
</div>

<div class="sections">
  <section data-color="#b4da55" id="white"></section>
  <section data-color="#ffffff" id="blue"></section>
  <section data-color="#b4da55" id="white"></section>
</div>

Answer 1

您的代码没有像我认为的那样使用 SVG 矩形形状。为了演示这一点，我将 rect 更改为 ellipse，然后适当更改属性，即将 y 更改为 cy，width 到 rx，height 到 ry。结果表明，首先，该形状仅显示整个形状的一部分(右下四分之一？)，其次，当截面边框覆盖该形状时，它实际上被压扁了。您在原始示例中看不到这些东西，因为矩形的四分之一仍然是矩形，而压扁的矩形也仍然是矩形。因此，您认为在原始示例中有效的方法实际上无效。所以问题不在于使用路径，而是你的原始代码。

如果您只想使用矩形，我想您可以按原样使用原始代码，因为它确实产生了所需的视觉效果。但是，如果您只是将矩形用作概念验证，而您的真正最终目标是使用路径，那么您需要一种不同的方法。您可能会考虑使用 clipPath/clip-path 将路径“切割”成多个部分，因为部分边界经过它，但这需要对你的代码。

var sections = document.querySelectorAll('section');
var logo = document.querySelector('#logo');
var nextColor = document.querySelector('#nextColor');
var currentColor = document.querySelector('#currentColor');
var initialHeight = logo.clientHeight;
var lastScrollPosition = 0;

// Set current section color
sections.forEach(function (section) {
  var top = section.offsetTop - window.pageYOffset;
  if (top <= logo.offsetTop && (top + section.clientHeight) >= logo.offsetTop) {
    currentColor.setAttribute('fill', section.dataset.color);
  }
});

window.addEventListener('scroll', function () {
  sections.forEach(function (section) {
    var top = section.offsetTop - window.pageYOffset;
    var offset = top - logo.offsetTop;
    
    // If the top edge of the section is behind the logo
    if (top <= logo.offsetTop) {
      // Make sure the section color has its initial height
      currentColor.setAttribute('ry', initialHeight);
      // If the logo is still inside the section, fill it with the section color
      var bottom = top + section.clientHeight;
      if (bottom >= logo.offsetTop) {
        currentColor.setAttribute('fill', section.dataset.color);
      }
      
      return;
    }
    
    // If logo collides with the lower section
    if (offset <= logo.clientHeight) {
      nextColor.setAttribute('fill', section.dataset.color);
      currentColor.setAttribute('ry', offset);
    }
  });
});

#logo {
  position: fixed;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
}

section {
  height: 100vh
}

#dark {
  background-color: #2a2a2a;
}

<div id="logo">
  <svg height="100" width="100">
    <ellipse id="nextColor" rx="100" ry="100"/>
    <ellipse id="currentColor" cy="0" rx="100" ry="100"/>
  </svg>
</div>

<div class="sections">
  <section data-color="#000000" id="light"></section>
  <section data-color="#ffffff" id="dark"></section>
  <section data-color="#cccccc" id="light2"></section>
</div>