IE10 在缩放时无法正确缩放背景 SVG（在 Surface/Windows 8 手机上）答案

【问题标题】：IE10 does not scale background SVG correctly when zoomed (on Surface/Windows 8 phone)IE10 在缩放时无法正确缩放背景 SVG（在 Surface/Windows 8 手机上）
【发布时间】：2013-01-11 23:16:39
【问题描述】：

有人知道是否有解决方法吗？当用户缩放时，Internet Explorer 10 和 Window phone 8 无法正确缩放背景 SVG 图像。看起来 IE 在加载时栅格化了 SVG。

Here is an example: 第一个图像是 SVG 作为背景图像。放大 MS Surface 或 Windows 8 手机，你会看到它模糊得可怕。

第二张图片是与 img 标签相同的 SVG。在 Surface 或 Windows 8 手机上缩放它，它可以按您预期的方式缩放（漂亮且干净）。

是否可以添加任何属性来使 IE10 正常运行？还是只是等待雷德蒙德的人来修复它？

【问题讨论】：

如果我没记错的话，IE10 对 SVG 使用硬件加速。如果您在缩放事件后重新插入背景 src，则它可能会“锐化”，但不会在缩放期间（仅在之后）。
嗨 Duopixel，你的意思是用 JS 重新插入？如果这是在缩放时/缩放后锐化背景 SVG 的唯一方法，我会错过它并等待 MS 解决问题。
这主要是直觉，但我没有要测试的 Windows Touch 设备。我希望有人真正尝试一下。如果可能，我会为这个问题添加赏金（我必须等待 48 小时才能添加）。
您的演示对两个图像都使用了 .png。至少这是我在调试器中看到的，并且在我尝试过的所有桌面浏览器中，这两个图像在放大时都会变得模糊。
这是一个实际使用 SVG 的版本。 Firefox 中也存在相同的缩放问题。 codepen.io/dstorey/full/afwCk

标签： svg zooming background-image internet-explorer-10

【解决方案1】：

问题是 IE 和 Firefox 等其他浏览器在显示 SVG 之前会对其进行光栅化，因此缩放时会变得块状。

解决此问题的最简单方法是使 SVG 文件大于所需大小。例如，如果用户可能进一步放大，则将尺寸加倍或更多。然后，您可以使用 CSS 调整 SVG 图像的大小，以正确的大小显示它。这样图像自然会变大，因此不会变得块状，除非您进一步放大。在默认缩放级别下，图像被缩小而不是放大，浏览器通常处理得更好。

编辑：您可以在 http://dbushell.com/2012/03/11/svg-all-fun-and-games/ 的“SVG 和 CSS 背景”标题下找到有关此问题的更多信息

【讨论】：

既然你 @David Storey 在 IE 团队工作，你什么时候真正解决这个问题？