4

有没有办法在我的网站上使用 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" />

4

3 回答 3

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>
于 2014-05-09T09:44:32.303 回答
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) {
    ...
}
于 2012-10-11T19:20:55.190 回答
1

另一种方法是使用具有后备功能的 SVG 的 CSS-ony 解决方案，如本答案所述： https ://stackoverflow.com/a/13575068/418711

于 2012-11-26T23:46:04.760 回答