Html 使用掩码设置svg动画时，我在剪切svg外部时遇到问题

我有一个简单的svg，它有两条分组路径，是一件T恤的形状。我已经创建了一个带有填充颜色红色圆圈的遮罩，我正在将该遮罩设置为从一条路径的底部到顶部的动画。您可以看到它在codepen上运行。我被卡住的地方是如何用笔划剪裁T恤外面的所有东西，这样你就只能看到里面的蒙面路径动画

提前谢谢

这是密码笔

#svg{
宽度：100px；
保证金：0自动；
显示：块；
}
圈{
动画持续时间：10秒；
动画名称：塔；
动画迭代次数：无限；
}
@关键帧塔{
0% {
变换：translateY（100px）；
}
100% {
变换：translateY（0px）；
}
}

<代码> > p>这里是CSS解决方案，我将考虑掩码。我将使用带填充和不带笔划的路径版本作为遮罩，使用带笔划和不带填充的路径版本作为背景：


.box{
宽度：100px；
高度：100px；
-webkit掩码：url（'data:image/svg+xml；utf8'）居中/不包含重复；
掩码：url（'data:image/svg+xml；utf8'，）居中/不包含重复；
位置：相对位置；
}
.box：：之前，
.box：：之后{
内容：“；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
-webkit掩码：继承；
面具：继承；
}
.box：：之前{
背景：rgba（255,0,0,0.4）；
动画：移动3s无限线性交替；
}
.box：：之后{
背景：url（'data:image/svg+xml；utf8'）居中/不包含重复；
}
@关键帧移动{
从{
转化：translateY（100%）；
}
}

通常，如果要剪裁某个对象，可以使用剪裁路径。移动组中的圆并剪裁组。您还可以通过为路径指定
id
来简化代码，并在掩码中使用它，而不是重复相同的路径