如何在SVG径向渐变中反转css剪辑路径或设置硬停止动画

通常，css剪辑路径用于隐藏元素边缘的起始位置。我可以这样使用：

剪辑路径：圆形（70%位于中心）

然后得到这样的结果：


有没有办法让我颠倒过来？我希望我的结果是这样的：


我想剪辑图像的中心，而不是边缘。这是一个SVG，所以我尝试了类似这支笔的东西，为径向渐变设置动画：

但这并没有达到预期效果。有一个动画，然后是一个我认为动画周期的最后一步应该是什么样子的，但它不是。如果您在url形式（即svg标记）中使用clipPath，则可以使用still use clipPath。顺时针绘制路径外部矩形，逆时针绘制内部椭圆（使用两个或多个椭圆弧），将所有内容一起绘制为单个路径

或者，您可以使用
。这是一个更简单但速度较慢的解决方案。在遮罩区域内绘制一个白色椭圆，遮罩的这一部分将是不透明的。
下面是最终发生的情况：

因为我试图匹配的背景是纯色，所以我给圆一个半径加倍的笔划（因为笔划应用于对象边缘的中心），然后应用对象大小的剪辑路径。然后我将笔划设置为0。将在应用程序运行时更新，并添加指向该应用程序的链接。
最终的希望是以一种放射状的方式将其动画化。我不知道我将如何抓住路径的一部分，随着时间的推移改变它的坐标。您可以手动获取每一帧的点，但这似乎比它的价值更大。对于该用例，听起来更像“蒙版”，但在前一种情况下，您当然可以对路径进行SMIL动画。