SVG / PNG扩展开关

时间:2012-10-11 19:12:16

标签: php javascript svg png modernizr

有没有办法在我的网站上使用SVG图像,如果浏览器/设备不支持它,请将扩展名切换为png?有更好的方法吗?

注意:我使用的是<img>代码和Modernizr。

这是我的代码,动态地吐出图像。

<?php $attachments = attachments_get_attachments(); ?>
        <?php if( function_exists( 'attachments_get_attachments' ) ) {
        $attachments = attachments_get_attachments();
        $total_attachments = count( $attachments ); if( $total_attachments ) : ?><?php for( $i=0; $i<$total_attachments; $i++ ) : ?>
<img src="<?php echo $attachments[$i]['location']; ?>" alt="<?php echo $attachments[$i]['title']; ?>" class="full" />
<?php endfor; ?><?php endif; ?><?php } ?>

输出以下内容: <img src="http://mysiteurl.net/image.png" alt="Image Title" class="full wp-image-287" />

3 个答案:

答案 0 :(得分:3)

这是有效的,只过滤svg文件

<script type="text/javascript">
jQuery( document ).ready(function() {
    if(!Modernizr.svg){
      jQuery("img").each(function(){
        var src = this.src;
        if( src.match(/svg$/) ){
            // Replace "svg" by "png"
            this.src = src.slice(0,-3) + 'png'
        }           
      });
    }
});
</script>

答案 1 :(得分:1)

我想您可以测试是否支持svg,如果没有循环浏览图片代码并将其src路径设置为.png。此示例尚未经过测试,但可能是朝着正确方向迈出的一步。

if(!Modernizr.svg){
  var images = document.getElementsByTagName("img");
  for(var i = 0; i < images.length; i++){
    var src = images[i].src.split(".");
    images[i].src = src[0] + ".png";
  }
}

如果jQuery是一个选项,那么这样的事情可能是这样的:

if(!Modernizr.svg){
  $("img").each(function(){
    var src = this.src.split(".");
    this.src = src[0] + ".png";
  });
}

修改

您也可以考虑查看Modernizr-Server。这样,您可以在循环浏览图像时测试svg并附加相应的扩展名。

if ($modernizr->svg) {
    ...
} elseif ($modernizr->canvas) {
    ...
}

答案 2 :(得分:1)

另一种方法是使用仅支持CSS的解决方案进行回退,如下面的答案所述: https://stackoverflow.com/a/13575068/418711