Css svg掩码中不需要的水平线

我正在使用SVG掩码和渐变渲染一条线，类似于Github在查看和组织的存储库列表时为其渲染闪烁线的方式

由于某种原因，当SVG的宽度为某个值时，在行的顶部会出现一条水平线：

该行似乎对应于SVG组元素，该元素包含一个矩形，该矩形应用了遮罩和渐变填充：

但是，将SVG调整为不同的宽度会导致该行不显示：

以下是示例SVG的标记：

正文{
背景：#000；
}

---

我不确定是什么原因导致了该问题，但这里有一个解决方法来避免它。其思想是通过更改

rect

（其y值）的位置来隐藏此行

因此，这是一个有童车的SVG：

正文{
背景：黑色；
}

---

我不清楚为什么github使用复杂的矩形、遮罩和变换排列来绘制迷你线图。看起来它可能触发了Chrome中的一个bug

你考虑过简化图表吗？只需使用自己的闪光路径，并应用梯度直接到它

正文{
背景：#000；
}

不要放截图，放代码instead@TemaniAfif更新为包含实际标记在Chrome或Safari中都看不到您的第一个链接的问题。@jcaron我在Mac上，用Chrome查看，它对我是可见的。请注意，运行上述问题中的代码不会显示错误。外部链接确实显示了这一点。是的，我怀疑它也与“g”元素有关，在dev工具中，您可以看到不需要的水平线沿着g元素的顶部。但是，g元素是必需的，这样当路径接近SVG容器顶部时，路径就不会被截断。@clhenrick不，不是g。。我再次更新了我的答案，请尝试查看。我认为浏览器和绘图工具很奇怪！我的目标是复制Github使用的样式，因此需要使用SVG掩码和渐变。我还注意到其他浏览器（如Firefox）中的错误