无Javascript/SVG支持的SVG注入回退_Javascript_Svg_Internet Explorer 8

无Javascript/SVG支持的SVG注入回退

javascript svg internet-explorer-8

无Javascript/SVG支持的SVG注入回退,javascript,svg,internet-explorer-8,Javascript,Svg,Internet Explorer 8,我们正在研究使用Iconfu将SVG文件注入HTML文件。出于某种原因，我们的一个项目仍然需要对IE8的支持（不要问），所以我不得不用非常旧的浏览器来测试这一点 SVGInject文档中没有SVG支持，如下所示（我自己添加的图像维度）：虽然回退机制适用于IE8的标准配置，但我发现，如果浏览器不支持SVG和Javascript（例如禁用Javascript的IE8），则没有回退机制以下是不同场景中显示的内容：现代浏览器（Chrome、Firefox、Webkit） SVG作为内联SVG注

我们正在研究使用Iconfu将SVG文件注入HTML文件。出于某种原因，我们的一个项目仍然需要对IE8的支持（不要问），所以我不得不用非常旧的浏览器来测试这一点

SVGInject文档中没有SVG支持，如下所示（我自己添加的图像维度）：

虽然回退机制适用于IE8的标准配置，但我发现，如果浏览器不支持SVG和Javascript（例如禁用Javascript的IE8），则没有回退机制

以下是不同场景中显示的内容：

现代浏览器（Chrome、Firefox、Webkit）

SVG作为内联SVG注入，完全可设置样式

现代浏览器，禁用Javascript

SVG显示为

，不可设置样式

Internet Explorer 8

将显示回退PNG

Internet Explorer 8，禁用Javascript

显示断开的图像

在上一个场景中没有显示图像的原因是从来没有触发onerror，因此无法设置回退源属性

我想知道，即使在SVG和Javascript都不支持的情况下，是否有一种方法（或黑客）可以显示回退图像

注：这更多的是一个理论问题。尽管该项目需要IE8支持，但我认为这是一些遗留需求，因为这些需求是在2010年编写的。

实际上有一种方法可以做到这一点，但它并不完美，因为is对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>


//SVGInject的包装器，它做一些预处理
SVGInject2=功能（img，选项）{
if（typeof SVGRect！=“undefined”）{//检查是否支持SVG
//如果提供了srcset，则将src替换为srcset
var srcset=img.srcset；
如果（srcset）{
img.src=srcset；
}
SVGInject（img，期权）；
}
}

它是如何工作的？

您可能知道，如果提供了HTML

属性，则有一个srcset
属性<代码>srcset

受evergreen浏览器（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，则不使用PNG，这意味着PNG传输是不必要的。在其他浏览器上，使用此回退方法时不应影响性能
免责声明：我是SVGInject的作者之一
<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>