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

Question

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

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

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

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

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

Answer 1

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

我的案例的修复只是在元素中添加背景色。由于元素是完全圆的，我也可以简单地创建一个border-radius，因此背景永远不会出现。 但是，如果该元素不是一个完整的圆形圆，那么这将不是一个可行的修复方法。