掌握多SVG元素组合与动画：以Snap.svg实现复杂图形变换

<div class="svg-container">
    <svg id="svg1" width="50%" height="50%" viewBox="0 0 2758 2440">...</svg>
    <svg id="svg2" width="60%" height="60%" viewBox="0 0 2785 2440">...</svg>
    <!-- 更多SVG元素 -->
</div>

.svg-container {
    position: relative; /* 或 flexbox/grid 布局 */
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

#svg1, #svg2 {
    position: absolute; /* 或使用 flex/grid 定位 */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 居中 */
    /* 其他定位和尺寸调整 */
}

<svg id="master-svg" width="100%" height="100%" viewBox="0 0 2785 2440" fill="none" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <!-- 整合所有SVG的defs内容，确保ID唯一 -->
        <filter id="filter0_f_54_9_frame1">...</filter>
        <linearGradient id="paint0_linear_54_9_frame1">...</linearGradient>
        <linearGradient id="paint1_linear_54_9_frame1">...</linearGradient>

        <filter id="filter0_f_70_4_frame2">...</filter>
        <linearGradient id="paint0_linear_70_4_frame2">...</linearGradient>
        <linearGradient id="paint1_linear_70_4_frame2">...</linearGradient>
        <!-- 更多defs -->
    </defs>

    <g id="frame1" filter="url(#filter0_f_54_9_frame1)">
        <path d="..." fill="url(#paint0_linear_54_9_frame1)" />
        <path d="..." fill="url(#paint1_linear_54_9_frame1)" fill-opacity="0.32" />
    </g>

    <g id="frame2" filter="url(#filter0_f_70_4_frame2)">
        <path d="..." fill="url(#paint0_linear_70_4_frame2)" />
        <path d="..." fill="url(#paint1_linear_70_4_frame2)" fill-opacity="0.32" />
    </g>
    <!-- 更多frame组 -->
</svg>

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>

// 选择整个SVG画布
var s = Snap("#master-svg");

// 选择ID为'frame1'的组
var frame1 = s.select("#frame1");

// 选择ID为'paint0_linear_54_9_frame1'的渐变
var gradient1 = s.select("#paint0_linear_54_9_frame1");

// 确保在DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    var s = Snap("#master-svg"); // 选择主SVG画布

    // 初始状态：隐藏除第一个frame外的所有frame
    s.selectAll("g[id^='frame']").forEach(function(el) {
        if (el.node.id !== 'frame1') {
            el.attr({ opacity: 0 });
        }
    });

    // 启动第一个动画
    animateFrame1();

    function animateFrame1() {
        var frame1 = s.select("#frame1");
        if (frame1) {
            console.log("Animating frame1...");
            // 动画：旋转180度
            frame1.animate({ 'transform': 'r180, 1379, 1220' }, 1000, mina.easeinout, animateFrame2);
            // 注意：'r180, 1379, 1220' 表示绕中心点(1379, 1220)旋转180度
            // 这个中心点需要根据你的SVG实际viewBox和元素位置来确定
        } else {
            console.error("Frame1 not found.");
            animateFrame2(); // 如果找不到frame1，直接跳到下一个
        }
    }

    function animateFrame2() {
        var frame1 = s.select("#frame1");
        var frame2 = s.select("#frame2");
        if (frame2) {
            console.log("Animating frame2...");
            // 隐藏frame1，显示frame2
            if (frame1) frame1.animate({ opacity: 0 }, 500);
            frame2.animate({ opacity: 1, 'transform': 'r180, 1392.5, 1220' }, 1000, mina.easeinout, animateFrame3);
        } else {
            console.error("Frame2 not found.");
            animateFrame3();
        }
    }

    function animateFrame3() {
        var frame2 = s.select("#frame2");
        var frame3 = s.select("#frame3");
        if (frame3) {
            console.log("Animating frame3...");
            if (frame2) frame2.animate({ opacity: 0 }, 500);
            frame3.animate({ opacity: 1, 'transform': 'r180, 1280.5, 1125' }, 1000, mina.easeinout, animateFrame4);
        } else {
            console.error("Frame3 not found.");
            animateFrame4();
        }
    }

    function animateFrame4() {
        var frame3 = s.select("#frame3");
        var frame4 = s.select("#frame4");
        if (frame4) {
            console.log("Animating frame4...");
            if (frame3) frame3.animate({ opacity: 0 }, 500);
            frame4.animate({ opacity: 1, 'transform': 'r180, 1246, 1096' }, 1000, mina.easeinout, animateFrame5);
        } else {
            console.error("Frame4 not found.");
            animateFrame5();
        }
    }

    function animateFrame5() {
        var frame4 = s.select("#frame4");
        var frame5 = s.select("#frame5");
        if (frame5) {
            console.log("Animating frame5...");
            if (frame4) frame4.animate({ opacity: 0 }, 500);
            frame5.animate({ opacity: 1, 'transform': 'r180, 1191, 1049.5' }, 1000, mina.easeinout, function() {
                console.log("All frames animated. Looping or stopping.");
                // 动画完成后可以循环，或者执行其他操作
                // 例如，将所有frame隐藏，然后重新开始animateFrame1()
                s.selectAll("g[id^='frame']").animate({ opacity: 0 }, 500, function() {
                    s.select("#frame1").attr({ opacity: 1 }); // 重置第一个frame的可见性
                    animateFrame1(); // 循环动画
                });
            });
        } else {
            console.error("Frame5 not found. Animation sequence ended.");
        }
    }
});