SVG动态遮罩在Chrome/Edge失效，Firefox正常，寻求兼容方案

我实现了一个用于图片遮罩的动态SVG，逻辑简洁，但在Chrome和Edge浏览器中无法正常工作，Firefox却能正常运行，控制台也没有抛出任何错误。查过相关文档，理论上代码应该没问题，但我的目标设备以移动设备为主，必须确保在Chrome中可用。

HTML代码 #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="css/styles.css">
</head>

<body>
    <div class="main">
        <div id="logo"><img src="imgs/realestate_logo.svg" alt="" /></div>
        <div class="combo">
            <svg width="100%" height="100%" viewBox="0 0 400 300">
                <defs>
                    <mask id="mask">
                        <rect fill="#000000" x="0" y="0" width="400" height="300"></rect>
                        <circle fill="#FFFFFF" cx="200" cy="150" r="0" />
                        <circle fill="#FFFFFF" cx="200" cy="150" r="0" />
                        <circle fill="#FFFFFF" cx="200" cy="150" r="0" />
                        <circle fill="#FFFFFF" cx="200" cy="150" r="0" />
                        <circle fill="#FFFFFF" cx="200" cy="150" r="0" />
                        <circle fill="#FFFFFF" cx="200" cy="150" r="0" />
                        <circle fill="#FFFFFF" cx="200" cy="150" r="0" />
                        <circle fill="#FFFFFF" cx="200" cy="150" r="0" />
                        <circle fill="#FFFFFF" cx="200" cy="150" r="0" />
                        <circle fill="#FFFFFF" cx="200" cy="150" r="0" />
                        <circle fill="#FFFFFF" cx="200" cy="150" r="0" />
                        <circle fill="#FFFFFF" cx="200" cy="150" r="0" />
                        <circle fill="#FFFFFF" cx="200" cy="150" r="0" />
                        <circle fill="#FFFFFF" cx="200" cy="150" r="0" />
                        <circle fill="#FFFFFF" cx="200" cy="150" r="0" />
                        <circle fill="#FFFFFF" cx="200" cy="150" r="0" />
                    </mask>
                </defs>
            </svg>
            <div class="container">
                <img src="imgs/villa.webp" alt="Your Image">
            </div>
        </div>
        <hr />
        <div class="texto">
            <p>Soy el texto</p>
        </div>
    </div>
    <script>
        window.addEventListener('load', function() {

            // Logo Animation
            const logoElement = document.getElementById("logo");
            setTimeout(() => {
                logoElement.style.opacity = "1";
                logoElement.style.transform = "translateY(0)";
            }, 500);  // Delay for half a second before starting the logo animation

            const img = document.querySelector(".container img");
            const circles = document.querySelectorAll("#mask circle");

            // Image dimensions and circle animation
            const width = img.naturalWidth;
            const height = img.naturalHeight;
            const aspectRatio = (height / width) * 100;
            const comboElement = document.querySelector(".combo");
            comboElement.style.paddingBottom = `${aspectRatio}%`;
            animateCurrentCircle(0);

            // Add event listener for window resize
            window.addEventListener('resize', function () {
                animateCurrentCircle(0);  // Reset the circle animation upon resizing
            });

            function getRandom(min, max) {
                return Math.floor(Math.random() * (max - min + 1) + min);
            }

            function animateCurrentCircle(index) {
                if (index >= circles.length) {
                    index = 0;
                }

                const svgWidth = parseFloat(getComputedStyle(document.querySelector("svg")).width);
                const svgHeight = parseFloat(getComputedStyle(document.querySelector("svg")).height);

                let maxi = Math.min(svgWidth, svgHeight) / 2;
                const r = getRandom(maxi / 4, maxi);
                const maxCx = svgWidth - r;
                const minCx = r;
                const maxCy = svgHeight - r;
                const minCy = r;
                const cx = getRandom(minCx, maxCx);
                const cy = getRandom(minCy, maxCy);

                const circle = circles[index];
                circle.setAttribute("r", r);
                circle.setAttribute("cx", cx);
                circle.setAttribute("cy", cy);

                setTimeout(() => {
                    animateCurrentCircle(index + 1);
                }, 400);
            }
        });
    </script>
</body>

</html>

CSS代码 #

@font-face {
    font-family: 'Addington';
    src: url('../fonts/AddingtonCF-Light.ttf') format('truetype');
}

body, html {
    height: 100%; 
    margin: 0;   
    padding: 0;  
    background-color: #f4f4f4;
    font-family: 'Addington', serif; 
}

.main {
    display: flex;
    flex-direction: column; 
    align-items: center;   
    justify-content: space-evenly;
    height: 100%;         
    max-width: 1200px;     
    margin: 0 auto;        
    padding: 0px;          
    background-color: #fff; 
    gap: 10px;
}

#logo img {
    width: 90%;            
    min-width: 300px;      
    max-width: 400px;       
    height: auto;          
    display: block;        
    margin: 0 auto;        
}

#logo, .combo {
    width: 100%;          
    position: relative;    
}

.combo {
    width: 90%;            
    max-width: 720px;      
    min-width: 300px;     
    margin: 0 auto;        
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: auto;
}

.container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;          
    height: 100%;         
}

.container img {
    width: 100%;          
    display: block;        
    object-fit: cover;
    /*-webkit-mask-image: url(#mask);*/
    -webkit-mask-size: cover;
    -webkit-mask-repeat: no-repeat; /* Added to ensure mask doesn't repeat */
    /*mask-image: url(#mask);*/
    mask-size: cover;
    mask-repeat: no-repeat; /* Added to ensure mask doesn't repeat */
    height: 100%;
    -webkit-mask: url(#mask);
    mask: url(#mask);
}

svg {
    position: absolute;   
    top: 0;
    left: 0;
    width: 100%;          
    height: 100%;         
}

circle {
    transition: all 5s ease;
}

.texto {
    font-size: 18px;
}

#logo {
    opacity: 0;
    transform: translateY(-50px);
    transition: opacity 1s, transform 1s;
}

恳请各位提供帮助，谢谢！

内容的提问来源于stack exchange，提问作者Rodolfo Awenydd Luna Bernal