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のCSS-onyソリューションを使用することです： https ：//stackoverflow.com/a/13575068/418711

于 2012-11-26T23:46:04.760 に答える
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 に答える