小编and*_*san的帖子

SVG 背景在 Chrome 和其他基于 Blink/webkit 的浏览器中显得模糊：

Chrome 中 SVG 的一部分的屏幕截图：

Firefox 中 SVG 的一部分的屏幕截图：

仅当使用“background-repeat: true”和“background-size: contains”CSS 值显示 SVG 时才会发生这种情况。我们希望根据需要多次重复 SVG 背景高度，因为页面高度是动态的，拉伸矢量图像看起来会很差。

SVG 在下面的示例页面的 CSS 中内联显示，但当我链接到外部 SVG 图像时，问题也会以同样的方式发生。

这是显示此行为的测试页面： https://august-13-2020-test-canvas.bubbleapps.io/version-test/pagemaker-test-original-2 （使用“用户名”和“密码”登录，我们需要将此身份验证放在这里）。

正确显示（清晰/平滑边缘）SVG 的测试页位于：https: //august-13-2020-test-canvas.bubbleapps.io/version-test/pagemaker-test-online-1

具有清晰/平滑边缘的版本以完全相同的方式显示 - 唯一的区别是 SVG 的内容。

以下是模糊页面的背景 SVG 链接：https://dd7tel2830j4w.cloudfront.net/d44/f1588704991659x396570736162959360/background.svg

我在此页面测试的所有 SVG 都有清晰的边缘：https://www.svgbackgrounds.com/#flat-mountains（右下角的是上面链接中使用的）

在尝试解决此问题或在 SVG 代码中确定其原因的过程中，我对 SVG 进行了相当多的编辑，尝试执行以下操作：

• 将所有 SVG 点值（路径的 d 属性）转换为整数
• 将“PreserveAspectRatio”添加到 SVG 的开始标签
• 从 SVG 的打开声明中删除高度和宽度
• 从 SVG 中删除“线性渐变”并用静态颜色替换它们
• 将 SVG 形状的大小加倍，看看模糊度是否会随着初始宽度和高度的增大而降低
• 将“crispEdges”属性添加到 SVG 路径
• 优化 SVG（使用 SVGomg）

此外，我尝试对 CSS 进行一些更改，但无法使其正常工作。

我对解决方法的一些想法如下： …

我们的 Google 帐户至少有几个月没有虚拟机投入使用 - 我们可能在 2020 年初或 2019 年的某个时候测试过一个短时间内的虚拟机。该服务已启用，一周前开始出现大量 API 调用：

下面是更具体的图表，显示了正在执行的实际 API 调用，并显示它们是由匿名用户执行的（即不使用 API 密钥）。

为什么这些会突然执行，而我们没有任何活动触发它们？

这个另一个答案表明 Google 执行 API 调用来检查您使用了多少容量，那么 Google 是否有可能每小时检查数百次以查看哪些虚拟机已启动？有大量 Compute Engine API 请求是否正常？