html - 在网页中渲染 SVG

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)
      })
  }
})