如何为网页预加载器的SVG动画添加适配尺寸的黑色容器并限制动画范围

Got it, let's fix this for you! The issue with your previous attempt was probably applying the black background to the full-page preloader instead of a nested container. Below is the modified code that gives you a white page background, a centered black container, and ensures the SVG animation stays entirely inside that container:

<!DOCTYPE html>
<html>
<head>
    <style>
        * { 
            padding: 0; 
            margin: 0; 
            box-sizing: border-box; 
        } 
        @import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@500;700&family=Montserrat:wght@400;600&family=Oswald:wght@500&family=Pacifico&family=Roboto:ital,wght@0,400;0,900;1,500&display=swap'); 
        
        /* Full-page white background wrapper */
        #preloader { 
            position: fixed; 
            top: 0; 
            left: 0; 
            right: 0; 
            bottom: 0; 
            z-index: 9999; 
            background: white; 
            display: flex; 
            justify-content: center; 
            align-items: center;
        } 

        /* Centered black container for animation */
        .preloader-container {
            width: 300px; /* Adjust this to your desired size */
            height: 300px; /* Adjust this to your desired size */
            background-color: black;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden; /* Critical: stops animation from spilling outside */
            position: relative;
        }

        .svg-file path { 
            fill: transparent; 
            stroke-width: 3; 
            stroke: rgb(1, 36, 133); 
        } 
        .svg-file.z-logo path { 
            stroke-dasharray: 550; 
            stroke-dashoffset: 0; 
        } 
        .svg-file.z-logo path { 
            animation: animate-zlogo 3s linear infinite; 
        } 
        svg { 
            filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 1)); 
            width: 150px; /* Adjust SVG size to fit the container */
            height: 150px;
        } 
        .svg-file h2 { 
            font-family: "Roboto", cursive; 
            transform: translate(0, 20px) skewX(-210deg) rotate(-6deg); 
            font-size: 2em; 
            color: #044d77; 
            position: absolute;
            bottom: 10px;
        } 
        .svg-file span { 
            animation: dots 2.5s steps(6, end) infinite; 
            font-size: 3em; 
            display: block; 
            transform: translate(0, 25px) skewX(-210deg) rotate(-6deg); 
            background-color: rgb(5, 46, 80); 
            width: 8px; 
            height: 5px; 
            position: absolute;
            bottom: 15px;
            left: 130px;
        } 
        @keyframes fadein-fadeout { 
            0% { opacity: 0; } 
            50% { opacity: 1; } 
            100% { opacity: 0; } 
        } 
        @keyframes animate-zlogo { 
            0% { stroke-dashoffset: -50; } 
            20% { stroke-dashoffset: 550; fill: transparent; } 
            40% { fill: transparent; stroke-dashoffset: 1100; } 
            60% { stroke-dashoffset: 1100; fill: #05f7f9; } 
            80% { stroke-width: 0; fill: #05f7f9; } 
            100% { stroke-width: 3; fill: transparent; } 
        }
        @keyframes dots {
            0%, 20% { opacity: 0; }
            40% { opacity: 1; }
            60% { opacity: 0; }
            80% { opacity: 1; }
            100% { opacity: 0; }
        }
    </style>
</head>
<body>
    <div id="preloader"> 
        <!-- Nested black container holds the animation -->
        <div class="preloader-container">
            <div class="svg-file z-logo"> 
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 133 133"><g id="H"><path d="M45.33 78.22L87.67 78.22L87.67 133L121.05 133L121.05 0L87.67 0L87.67 49.33L45.33 49.33L45.33 0L11.95 0L11.95 133L45.33 133L45.33 78.22Z" fill="#47AF9A"/></g></svg> 
                <span></span> 
            </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        // Preloader fade-out logic remains the same
        $(window).on('DOMContentLoaded', function() { 
            if ($('#preloader').length) { 
                $('#preloader').delay(1000).fadeOut('slow'); 
            } 
        }); 
    </script>
</body>
</html>

What Changed & Why: #

• Added .preloader-container: This is your black box. I set it to 300x300px (feel free to adjust these numbers later). The overflow: hidden property is crucial—it makes sure no part of the SVG or text spills outside the container.
• Reworked #preloader: Now it's a full-page white background that uses flexbox to perfectly center the black container, instead of being the black container itself.
• Fixed SVG Scaling: Removed the global transform: scale(2) on the SVG (which was causing overflow) and adjusted the SVG's width/height directly to fit inside the black box.
• Adjusted Text Positioning: Tweaked the transform and added absolute positioning to the text/span so they stay aligned inside the black container without overflowing.

You can tweak the container's size, SVG dimensions, and text positions to get exactly the layout you want—this setup guarantees the black container stays centered on the white page, with all animation content contained within it.

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