SVG剪切路径动画不能缩放到目标大小

Question

我需要将clipPath的大小设置为应用它的容器的大小。但是我做不到。我了解到参数clipPathUnits="objectBoundingBox"可以提供帮助，但会破坏动画。

请帮助找到解决方案。

.wrapper {
    width: 200px;
    height: 200px;
    position: relative;
}
.wrapper .red {
    background-color: brown;
    color: honeydew;
    width: 100%;
    height: 100%;
    font-size: 30px;
}
.wrapper .green {
    background-color: green;
    color: #fff;
    width: 100%;
    height: 100%;
    font-size: 30px;
    position: absolute;
    top: 0;
    clip-path: url(#myMask);
}

.wrapper .mask-container {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}

#square {
    width: 100%;
    animation: moveRight 2s linear infinite;
}

@keyframes moveRight {
    0% {
        d: path(
            "M -51 1116 c -139 -6 -169 42 57 0 c 0 -359.9 0 -719.8 0 -1080 C -299 56 -133 8 4 11 c -303 197 -55 184 -70 340 c 27.5 60 40 123.3 39 109 c -13.1 60.3 -45.3 116.9 -78.2 168.4 c 15.2 70.6 -81.1 121 -69.8 129.6 C -366 946 -323 907 -90 1001 z"
        );
    }
    25% {
        d: path(
            "M 210 1088 c -139 -6 -164 0 -206 -3 c 0 -359.9 0 -719.8 0 -1080 C 70 5 101 8 164 1 c -303 197 111.6 230.3 -70 340 c 27.5 60 40 123.3 39 109 c -13.1 60.3 -45.3 116.9 -78.2 168.4 c 15.2 70.6 -81.1 121 36.2 113.6 C 79 955 252 964 104 1010 z"
        );
    }
    50% {
        d: path(
            "M 636 1088 c -139 -6 -487 0 -624 -3 c 0 -359.9 0 -719.8 0 -1080 C 345.3 0 503 -2 727 1 c -399 146 111.6 230.3 -484 382 c 27.5 60 40 123.3 39 109 c -13.1 60.3 -45.3 116.9 -78.2 168.4 c -37.6 59 -81.1 121 36.2 113.6 C 764 982 252 964 367 1007 z"
        );
    }
    75% {
        d: path(
            "M 815 1085 c -356.3 0 -712.6 0 -817 2 c 0 -359.9 0 -719.8 0 -1080 C 345.3 0 503 -2 727 1 c 15.6 132.9 111.6 230.3 28 421 c 27.5 60 40 123.3 -31 188 c -13.1 60.3 -45.3 116.9 -78.2 168.4 c -37.6 59 -81.1 121 285.8 112.5 C 764 982 252 964 806 1055 z"
        );
    }
    100% {
        d: path(
            "M1069,1080c-356.3,0-712.6,0-1068.9,0c0-359.9,0-719.8,0-1080C345.3,0,690.7,0,1036,0c15.6,132.9,111.6,230.3,165.6,347.9  c27.5,60,40,123.3,25.8,188.5c-13.1,60.3-45.3,116.9-78.2,168.4c-37.6,59-81.1,121-100.1,189C1028.3,968.2,1038.8,1010.4,1069,1080z"
        );
    }
}

<div class="wrapper">

        <svg class="mask-container" viewBox="0 0 1920 1080" width="100%" height="100%">
            <clipPath id="myMask">
                <path id="square" d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" />
            </clipPath>
        </svg>

        <div class="red">
            Test
        </div>
        <div class="green">
            Test
        </div>

    </div>