javascript - 使用带有 svg 标签的 IntersectionObserver 的解决方案

Question

所以我正在为我的网站制作一个技能部分，我为圆环技能创建了一个动画来填充，这就是它的样子。

问题是动画在页面加载时激活，我看不到动画，因为当我滚动到技能部分时，动画已经开始和结束。

圆环动画是用 SVG 标签制作的，我想在用户观察技能圆环时使用 IntersectionObserver 来激活动画。它不起作用，因为 IntersectionObserver 可以观察到 svg 元素的类，我该如何解决？

这是代码

  <div class="svg-item">
<h1 class="skill">Python</h1>
<svg width="100%" height="100%" viewBox="0 0 40 40" class="donut">
  <circle class="donut-hole" cx="20" cy="20" r="15.91549430918954" fill="#000000"></circle>
  <circle class="donut-ring" cx="20" cy="20" r="15.91549430918954" fill="transparent" stroke-width="3.5"></circle>
  
  <circle class="don" cx="20" cy="20" r="15.91549430918954" fill="transparent" stroke-width="3.5" stroke-dasharray="100 0" stroke-dashoffset="25"></circle>
  <g class="donut-text">

    <text y="50%" transform="translate(0, 2)">
      <tspan x="50%" text-anchor="middle" class="donut-percent">100%</tspan>   
    </text>
  </g>
</svg>

CSS

      /** SKILLS **/
  @keyframes donut-chart-fill {
    to { stroke-dasharray: 0 100; }
  }

  .container-skills {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    justify-content: center;
    gap: 150px;
    top: 300px;
  }

  .skill {
    color: #fcfdf8;
    text-align: center;
    padding-bottom: 1px;
    height: 30px;
  }

  .svg-item {
    width: 200px;
    height: 200px;
    font-size: 16px;
  }
  .donut-ring {
    stroke: #00000;
  }

  .donut-segment {
    animation: donut-chart-fill 1s reverse ease-in;
    transform-origin: center;
    stroke: #00a6ff;
  }


  .donut-text {
    fill: #00a6ff;
  }

  .donut-label {
    font-size: 0.28em;
    font-weight: 200;
    line-height: 1;
    fill: #000;
    transform: translateY(0.25em);    
  }

  .donut-percent {
    font-size: 0.5em;
    fill: #00a6ff;
    line-height: 1;
    transform: translateY(0.5em);
  }

JS

    function callback(entries) {
  entries.forEach(function (entry) {
    if (entry.isIntersecting) {
      entry.target.classList.add('donut-segment');
    } else {
      entry.target.classList.remove('donut-segment');
    }
  });
}
function initObserver() {
  var observer = new IntersectionObserver(callback);
  var items = document.querySelectorAll('.don');
  for(var i in items) {
    if(!items.hasOwnProperty(i)) {
      continue;
    }
    observer.observe(items[i]);
  }
}
if (window.IntersectionObserver) {
  initObserver();
} else {
  console.log("IntersectionObserver not supported.");
}

“don”类不会显示环形动画，除非被称为“donut-segment”，我在 JavaScript 部分尝试的代码但它不起作用，它不会改变“don”类（在SVG 标签）到“甜甜圈段”。

提前感谢您的帮助:)

标签： javascriptclasssvgintersection-observer