Css SVG掩码是；出血“；在画布边缘

我有一个动画svg，可以为“闪烁/剪切”效果设置动画。但是，掩码在svg框的边缘上不起作用。我似乎不明白为什么它会出现在边缘

编辑-这似乎是一个特定于chrome的问题，但我还没有找到解决方案

.container{
背景：#671717；
显示器：flex；
证明内容：中心；
对齐项目：居中；
高度：100vh；
最小高度：260px；
}
#有趣的东西8个好东西一个闪光{
动画：fun-stuff-8-gooood-one-gleam_到_u到600ms线性1正常向前
}
@关键帧fun-stuff-8-gooood-one-gleam\u到{
0% {
转换：转换（-158.186752px，357.723397px）
}
100% {
转换：转换（707.836896px，139.92000px）
}
}
#有趣的东西8古德1{
最大宽度：300px
}

---

看起来Chrome在将剪辑路径应用到图像时确实有问题。当图像移动时，情况似乎会更糟—就像您的情况一样

然而，有一个简单的解决办法。改用

或者，我希望将图像中的光线切换到带有linearGradient的SVG对象也可以正常工作

使用遮罩而不是剪辑路径的示例

（请注意，我已将SVG裁剪为只显示重要的部分）

.container{
背景：#671717；
显示器：flex；
证明内容：中心；
对齐项目：居中；
高度：100vh；
最小高度：260px；
}
#有趣的东西8个好东西一个闪光{
动画：fun-stuff-8-gooood-one-gleam_到_u到3600ms线性1正常向前
}
@关键帧fun-stuff-8-gooood-one-gleam\u到{
0% {
转换：转换（-158.186752px，357px）
}
100% {
转换：转换（707.836896px，139px）
}
}
#有趣的东西8古德1{
最大宽度：300px
}

我觉得不错。这只是一个特定浏览器或特定操作系统上的问题吗？Im使用windows/Chrome你是对的，它没有在firefox中使用。很好的发现。也许你想在这里？我发现了这一点：我将对其进行调查，但不确定是否存在相同的问题。谢谢你的引导。你好，谢谢你的回复！我无法将clipPath元素转换为掩码元素。当我改变它的时候，它只是坏掉了，根本没有“掩蔽”..Nvm让它工作了。你这个摇滚人！实际上，由于某些原因，在使用遮罩时，当动画运行时，它会“模糊”所有svg细节，而不会使用剪裁遮罩。。。hmmmalso一旦我提高了动画的速度，即使使用“canvas”代替“clipPath”，边上的线条也会返回你好！我考虑了你所有的建议。我删除了图像，取而代之的是一个线性渐变对象，这是一个小技巧，但最终效果惊人，没有剪辑问题。（甚至不需要使用面具）干杯！