Html SVG在滚动后和不同页面上呈现不正确

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

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

请查看下面的屏幕截图，查看徽章（SVG）上的确切区别：

看起来浏览器只会在SVG与其后面的图像相遇的地方与SVG发生冲突。SVG在灰色中心仅略微透明，因此这不应成为其原因。 我在Chrome、Edge和Safari中进行了测试，它们都做了相同的事情

---

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

我找到了一个修复方法，解决了所有现代浏览器中一个明显未被发现的大错误，即通过CSS将SVG作为一个元素的背景处理，将另一个元素与背景/图像重叠

我的案例的修复方法就是简单地为元素添加背景色。由于元素是完全圆形的，我也可以简单地创建一个边界半径，因此背景永远不会出现。 但是，如果元素不是一个完整的圆，那么这将不是一个可行的修复方法