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

Question

似乎通常使用css clip-path来隐藏元素边缘的开头。我可以使用这样的东西：

clip-path:circle(70% at center);

得到这样的东西：

有没有办法可以反转它？我希望我的结果是这样的：

我想要剪切图像的中心，而不是边缘。它是一个SVG，所以我尝试了类似这支笔的东西，为径向渐变设置动画：http://codepen.io/ethanclevenger91/pen/myMYwQ

但那并没有像预期的那样发挥作用。有动画的那个，然后我假设动画周期的最后一步应该看起来像，但它没有。任何一种亮光都会受到赞赏。

Answer 1

如果您以url形式使用clipPath，则可以使用仍然使用clipPath，即svg标记。顺时针绘制路径外部矩形，逆时针绘制内部椭圆（使用两个或多个椭圆弧），将所有内容作为单个路径与clip-rule="evenodd"一起绘制

或者您可以使用<mask>。这是一个更简单但更慢的解决方案。在遮罩区域内绘制一个白色椭圆，遮罩的那部分将是不透明的。

Answer 2

所以这就是最终发生的事情：

由于我试图匹配的背景是纯色，我给圆圈一个双倍半径的笔触（因为笔划以对象的边缘为中心应用）然后应用了一个剪辑路径，该对象的大小。然后我将笔画设置为0.将在应用程序生效时通过链接进行更新。