Question

我有一个网页，我需要在其中显示SVG徽标。在最新的浏览器中这很容易实现，但我也需要使它与旧版浏览器兼容。如果浏览器不支持SVG，我需要向用户显示备用图像。我遇到了一个名为HTTP-content negotiation的方法，但是如何实现它以获得所需的结果呢？我尝试了<object>标签，但它似乎不适用于IE，并且在使用Firefox时非常难以设置样式。

Answer 1

我将在Modernizr的帮助下实现此客户端。鉴于诸如......之类的标记。

<!-- Start with bitmaps because 
they will show up in all browsers even 
if javascript is not enabled -->
<img src="logo1.png" class="logo" />
<img src="logo2.png" class="logo" />
<img src="logo3.png" class="logo" />
<img src="logo4.png" class="logo" />

你可以......

$(document).ready(function(){
  if (Modernizr.svg){
      $('.logo').each(function(){
         var src = $(this).attr("src");
         var svg = src.substr(0, src.lastIndexOf('.')) + ".svg";
         $(this).attr("src", svg)
      })
  }
})

在网页中呈现SVG

1 个答案: