SVG注入的后备，没有Javascript / SVG支持
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了SVG注入的后备，没有Javascript / SVG支持相关的知识，希望对你有一定的参考价值。
我们正在研究使用Iconfu SVGInject将SVG文件注入我们的html文件中。由于某种原因，我们的一个项目仍然需要IE8的支持（不要问），所以我被迫用真正的旧浏览器来测试它。
在SVGInject文档中有一个没有SVG支持的fallback example，它看起来像这样（我自己添加的图像尺寸）：
<html>
<head>
<script src="svg-inject.min.js"></script>
</head>
<body>
<img src="image.svg" width="128" height="128" onload="SVGInject(this)" onerror="SVGInject.err(this, 'image.png')" />
</body>
</html>
虽然回退适用于IE8的标准配置，但我发现如果浏览器不支持SVG和javascript（例如禁用Javascript的IE8），则不会出现回退。
以下是不同场景中显示的内容：
现代浏览器（Chrome，Firefox，Webkit）
SVG作为内联SVG注入，完全可定制
现代浏览器，Javascript禁用
SVG显示为<img>，不具有风格
Internet Explorer 8
显示后备PNG
Internet Explorer 8，禁用Javascript
显示损坏的图像 在最后一个场景中没有显示图像的原因是永远不会触发onerror，因此无法设置fallback source属性。
我想知道是否有一种方法（或黑客）使得后备图像显示，即使在SVG和Javascript支持都不可用的情况下也是如此。
注意：这是一个理论问题。虽然该项目需要IE8支持，但我认为这是一些遗留的要求，因为这些要求是在2010年编写的。
实际上有一种方法可以做到这一点，但它并不完美，因为它对Internet Explorer 9,10和11有性能影响。
以下是没有Javascript且没有SVG支持的完全回退的实现：
<html>
<head>
<script src="svg-inject.min.js"></script>
<script>
// Wrapper for SVGInject that does a little preprocessing
SVGInject2 = function(img, options) {
if (typeof SVGRect != 'undefined') { // check if SVG is supported
// replace src with srcset if srcset is provided
var srcset = img.srcset;
if (srcset) {
img.src = srcset;
}
SVGInject(img, options);
}
}
</script>
</head>
<body>
<img src="image.png" srcset="image.svg" width="128" height="128" onload="SVGInject2(this)" />
</body>
</html>
它是如何工作的？
您可能知道HTML srcset元素有一个<img>属性，如果提供的话，它优先于src属性。 srcset由常青浏览器（Chrome，Firefox等）支持，但不受Internet Explorer（所有版本）支持。
如果禁用Javascript，则src属性中指定的PNG将显示在Internet Explorer上。在现代浏览器中，将使用带有SVG URL的srcset属性。
如果启用了Javascript，则在加载图像后调用函数SVGInject2()。这将检查浏览器是否支持SVG。如果未检测到SVG支持，则不执行任何操作。这应该只发生在IE8和更旧版本上，这将显示PNG，就像Javascript被禁用一样。如果检测到SVG支持，则src属性的值将替换为srcset属性中的值，并调用SVGInject()函数。这将通过XHR加载SVG（使用src属性中的URL），并用加载的SVG替换<img>元素。在大多数情况下，浏览器已将SVG放在缓存中（从初始加载），因此SVG仅通过网络传输一次。
但是，对Internet Explorer 9,10和11的性能会有负面影响。在这些浏览器上，无论如何都会加载PNG，因为不支持srcset。如果注入SVG，则不使用PNG，这意味着PNG传输是不必要的。在其他浏览器上，使用此回退方法时不应对性能产生任何影响。
免责声明：我是SVGInject的作者之一。
以上是关于SVG注入的后备，没有Javascript / SVG支持的主要内容，如果未能解决你的问题，请参考以下文章