滚动后和不同页面上的 SVG 渲染不正确

Question

我已将徽章/图像从 PNG 转换为 SVG，以便能够以各种尺寸等重复使用资产。

问题在于，根据我嵌入 SVG 的特定网页，它要么看起来超级清晰（如预期的那样），要么看起来很糟糕，因为某种抗锯齿出现了可怕的错误。 即使在加载后 SVG 看起来很清晰的页面上，我也只需稍微滚动页面，直到它看起来也很糟糕。

请查看下面的屏幕截图，了解 BADGE (SVG) 上的确切区别：

似乎浏览器只会在 SVG 与它背后的图像相遇的地方混淆 SVG。 SVG 只是在灰色中心略微透明，所以这不应该是它的原因。 我已经在 Chrome、Edge、Safari 中进行了测试，它们都做同样的事情。

有人知道这可能是什么原因吗？

Answer 1

我找到了一个解决方案，解决了一个在所有现代浏览器中显然似乎未被发现的大错误，即通过 CSS 处理 SVG 作为元素上的背景与背景/图像重叠的另一个元素。

我的情况的解决方法是简单地为元素添加背景颜色。由于元素是完全圆形的，我也可以简单地制作一个边框半径，所以背景永远不会出现。 但是，如果该元素不是一个完整的圆形，则这将不是一个可行的解决方法。