使用Intersection Observer实现SVG元素视口触发动画

核心错误分析 #

• 类名拼写错误：JS中document.querySelector('.font-social')的类名写错了，目标元素的类是.front-social（少了字母r），导致根本没选中元素。
• observe目标错误：document.getElementsByClassName('.front-social')不需要加.，而且这个方法返回的是元素集合，observe只能接收单个DOM元素，直接传集合无效。
• display:none的问题：设置display:none的元素不在文档流中，Intersection Observer无法检测它是否进入视口，自然不会触发回调。

修复方案 #

1. 修正类名与元素选择 #

把拼写错误的.font-social改成.front-social，用querySelector直接获取单个目标元素。

2. 替换display:none为visibility/opacity #

改用visibility: hidden; opacity: 0;实现初始隐藏，这样元素仍在文档流中，Observer能正常检测相交状态，切换类时再恢复可见性。

3. 优化Observer逻辑 #

确保传入observe的是单个DOM元素，还可以添加类后停止观察，避免重复触发。

修正后的完整代码 #

HTML（无需修改） #

<div class="radial-graph-container">
  <svg width="200" height="200" class="chart-container">
    <circle cx="100" cy="100" r="90" class="back" fill="none" />

    <!-- 目标元素 -->
    <circle cx="100" cy="100" r="90" class="front-social" fill="none" />
    <g class="graph-center-txt">
      <text
        x="100"
        y="100"
        alignment-baseline="central"
        text-anchor="middle"
        id="percentage-social-media-usage"
      >
        0%
      </text>
    </g>
  </svg>
</div>

CSS（修改隐藏方式） #

.back {
  stroke: #101114;
  stroke-width: 10;
}

.front-social {
  stroke: #e96f31;
  stroke-width: 15;
  stroke-dasharray: 395.84;
  transform: rotate(-90deg);
  transform-origin: center;
  animation: fill 1.7s reverse;
  /* 替换display:none为以下属性 */
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s; /* 可选：添加过渡效果 */
}

.front-social-start {
  visibility: visible;
  opacity: 1;
}

/* 补充原代码缺失的动画关键帧 */
@keyframes fill {
  to {
    stroke-dashoffset: 395.84;
  }
}

JS（修正选择器与observe目标） #

// 修正类名拼写，正确选中目标元素
const el = document.querySelector('.front-social');
const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      el.classList.add('front-social-start');
      // 可选：添加类后停止观察，避免重复触发
      observer.unobserve(el);
    }
  });
});

// 传入单个DOM元素
observer.observe(el);

内容的提问来源于stack exchange，提问作者QuinXnX