IntersectionObserver触发SVG动画时transform作用范围异常

出现该问题有两个核心错误：

• 类名绑定逻辑错误：你将控制动画触发的lamp_fill类动态绑定在了外层包裹div上，元素进入视口时，div作为SVG的父容器会应用该类下的transform属性，连带整个SVG子元素一起变形，完全没有作用到内部目标path元素上。同时你写死了内部path默认就携带lamp_fill类，导致页面加载完成后动画就会直接启动，根本不受滚动视口逻辑控制。
• className语法错误：外层div的类名写法多了多余的单引号，会导致样式类解析异常。

1. 调整类名绑定位置：移除外层div上动态绑定的lamp_fill类，改为给需要动画的目标path元素动态绑定该类，仅当元素进入视口时才给path添加动画类，离开视口时移除。
2. 修正外层div的className语法错误，删除多余的单引号。
3. 补充IntersectionObserver的卸载清理逻辑，避免内存泄漏，可按需添加触发阈值配置优化交互体验。

React组件代码 #

import React, { useEffect, useRef, useState } from 'react';
import { ReactComponent as Animation2Svg } from '../assets/animation3.svg';
import './animation2.css';

export const Animation2 = () => {
  const animationRef = useRef();
  const [visibleAnimation, setVisibleAnimation] = useState(false);
  
  useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      const entry = entries[0];
      setVisibleAnimation(entry.isIntersecting);
    }, {
      threshold: 0.2 // 元素露出20%时触发，可按需调整数值
    });
    observer.observe(animationRef.current);

    // 组件卸载时取消监听，防止内存泄漏
    return () => observer.disconnect();
  }, []);

  return (
    <div
      ref={animationRef}
      className="animation_container"
    >
      <svg
        viewBox="0 0 960 960"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <g id="lamp">
          <g id="_12">
            <g id="Group">
              <path
                // 仅进入视口时才给目标path添加动画类
                className={visibleAnimation ? 'lamp_fill' : ''}
                d="M 673.8,268.9 C 670.49,212.31 666.03,147.85 624.05,105.09 605.03,88.927 595.75,88.708 576.1,80.6 534.08,69.765 491.07,82.083 449.66,89.913 382.62,105.67 316.07,123.33 250.11,143.21 201.04,156.23 143.22,156.92 106.41,196.62 76.875,241.04 84.709,297.04 84.201,347.5 86.612,407.39 83.901,468 85.176,528.14 91.427,563.78 86.363,600.74 93.601,636.8 98.899,686.58 100.94,736.75 110.7,786 111.72,829.71 125.29,878.56 165.7,901.7 198.5,924.75 239.5,926.4 278.1,929.56 334.3,923.31 391.34,926.4 447.84,924.66 496.01,923.32 545.09,928.05 592.56,918.66 626.73,907.16 644.69,870.96 647.87,836.92 653.71,790.73 638.83,744.73 638.8,698.8 639.22,658.74 633.25,618.65 640.1,578.7 645.02,533.8 655.02,489.37 657.67,444.12 668.11,386.49 675.47,327.74 673.8,268.9 Z"
                fill="black"
              />
              {/* 其余需要动画的path元素，按相同规则动态绑定lamp_fill类即可 */}
            </g>
          </g>
        </g>
      </svg>
    </div>
  );
};

CSS样式代码 #

给path添加transform属性时，保留transform-box: fill-box即可让变形效果仅在当前path元素上生效，不会影响整个SVG：

.lamp_fill {
  transform-box: fill-box;
  /* 按需设置transform原点和变形效果 */
  transform-origin: center;
  fill: transparent;
  /* 不需要循环播放就把infinite改成forwards，动画结束后保持最终状态 */
  animation: turnOn 6s linear forwards;
}

@keyframes turnOn {
  0%,
  30% {
    fill: transparent;
    transform: scale(0.8);
  }

  40%,
  100% {
    opacity: 1;
    fill: #ffb200;
    transform: scale(1);
  }
}

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