添加feColorMatrix滤镜后滚动圆形短暂消失问题求助

数据老陈

2026-6-13

问题：添加SVG滤镜后滚动的圆形出现短暂消失现象

我编写了一段代码，实现模糊圆形从容器中滚出的效果：

index.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="style.css">
</head>

<body>
    <div class="container">
        <div class="circle"></div>
    </div>
    <svg>
        <filter id="flt">
            <feGaussianBlur in="SourceGraphic" stdDeviation="8"></feGaussianBlur>
            <feColorMatrix type="matrix" values="
            1 0 0 0 0
            0 1 0 0 0
            0 0 1 0 0
            0 0 0 2 -1
            "></feColorMatrix>
        </filter>
    </svg>
</body>

</html>

style.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.container {
    position: relative;
    width: 500px;
    display: flex;
    filter: url(#flt);  
    background-color: bisque;
}

.container .circle {
    background-color: #000;
    width: 200px;
    height: 200px;
    position: relative;
    border-radius: 50%;
    animation: leftM 5s ease-in-out 2s forwards;
}

svg {
    display: none;
}

@keyframes leftM {
    0% {
        transform: translateX(0px);
    }

    100% {
        transform: translateX(600px);
    }
}

当我注释掉style.css中.container的filter: url(#flt);属性时，黑色圆形能正常从容器中滚出；但添加该属性后，圆形在滚动过程中会短暂消失，我无法找到原因，特此求助。