javascript - 为不受支持的浏览器将 SVG 图像转换为 png - 后备 - modernizer.js(?)

Question

我正在考虑将SVG我网站上的一些图像PNG用于不SVG正确支持的浏览器。我主要遇到基于文本的问题IE（显示的字体完全错误），所以我想我会创建一个回退到PNG.

我已经尝试为此寻找一个不错的演练（我是一个自认的菜鸟），但我还没有设法让它全部工作。我相信我想使用modernizer.js来检查兼容性，然后提供不兼容的不同图像（？）

Answer 1

Chris Coyier 在最新的Smashing Magazine CSS Q&A中回答了这个确切的问题。

1. 下载简化为仅测试 SVG 的Modernizr版本（假设这是您需要的唯一测试）。
2. 运行测试。如果通过，则放入 SVG。如果失败，请放入位图。本质上：

示例（JS解决方案）：

if (!Modernizr.svg) {
    $("#logo").css("background-image", "url(fallback.png)");
}

示例（CSS 解决方案）：

.no-svg #logo { background-image: url(fallback.png); }

这应该只对 IE8 及以下版本是必需的。我可以使用完整的浏览器支持表。

谢谢克里斯！