如果.svg失敗，顯示div隱藏'img'

Question

但是，因爲我們都知道在android 2.1/2.3中的支持是有限的，所以我在文本中顯示一個帶有'img'標籤的SVG圖像，並且支持文本svg更加有限。 （這是用於網站上的這個用戶的大量用戶池）

因此，我試圖（不是真正的工作）提供一個'div'的內容後備到SVG圖像（代替* .png）。由於缺乏jQuery知識，我使用Modernizr; Modernizr目前還沒有用於其他任何項目。理想情況下，如果可能，我想完全刪除Modernizr，這就是爲什麼我在這裏：處理這個問題的最佳方法是什麼？如果Modernizr實際上是檢測支持的最佳方法，那麼我會繼續使用它，無論如何，在document.ready之前完全從DOM中刪除「img」標記？

該div有schema.org微數據的日期，所以我只是在視覺上隱藏它。

或...它只是在語義上更準確地去'div'上的背景圖像和最初顯示內容？使用這種方法，我可以使用.no-svg，但仍然包含Modernizr。無論如何，我會對此更加滿意，因爲css對我來說更有意義。

或...有沒有更好的方法呢？因爲我即將訴諸於* .png，我還沒有得到svg fallback在android 2.1-2.3中一直正常顯示。

HTML

<img src="img/dates.svg" width="300" height="500" class="dates-svg" alt="important dates"> 
<div class="svg-fallback vh"> ... </div> 

JS

if (!Modernizr.svg) { 
    $('img[src$=.svg]').hide(); //if .svg not supported <img> display:none 
    $('.svg-fallback').removeClass('vh'); //make visible 
} 

CSS

.vh{ 
    position: absolute; 
    clip: rect(1px 1px 1px 1px); 
    clip: rect(1px, 1px, 1px, 1px); 
    margin: -1px; 
    border: 0; 
    padding: 0; 
    width: 1px; 
    height: 1px ; 
    overflow: hidden; 
} 

測試JS

if (!Modernizr.svg) { 
    $('.svg-fallback').removeClass('vh'); 
} else { 
    $('.svg-fallback').addClass('vh').add('<img src="img/dates.svg'...>'); 
} 

Answer 1

爲了達到上述目的，我需要以前的答案有點不合時宜。

我最終來到這個與同事決議：

• 如果SVG不支持，刪除所提供的div視覺隱藏類，只要有一個div組作爲後備。
• 如果所述div不存在，並且不支持svg，則用png替換svg。這是用於社交圖標和使用svg的排序，但僅使用alt來增加信息。
• 如果支持svg，請使用svg圖像，div保持視覺隱藏。

更新的jQuery

// if SVG Unsupported 
if (!Modernizr.svg) { 
    $('img').each(function() { 
     var src = this.src; 
     var fb = $(this).data('fallback'); 
     // if img.src extension is svg 
     if (src.length > 0 && src.match(/svg$/)) { 
      //if fallback is preset 
      if (fb.length > 0) { 
       fb.removeClass('vh'); //make div visible 
       $(this).remove(); //remove img from DOM 
      // if fallback isn't present 
      } else { 
       this.src = src.slice(0, -3) + 'png'; //replace extension with png 
      } 
     } 
    }); 
} 

HTML

<img src="@Url.Content("~/img/calendar.svg")" width="470" height="370" data-fallback=".calendar-fallback" alt="Important dates of the event"> 

<div class="calendar-fallback vh" itemscope itemtype="http://schema.org/Event"> 
    <!-- etc. --> 
    <p> 
    Submission Period begins 
    <time itemprop="startDate" content="2014-06-02T10:00-05:00" datetime="2014-06-02T10:00-05:00">June 2, 2014 at 10:00AM EST</time> 
    and goes until 
    <time itemprop="endDate" content="2014-07-15T18:00-05:00" datetime="2014-07-15T18:00-05:00">July 15, 2014 at 6:00PM EST</time> 
    <!-- etc. --> 
    </p> 
<!-- etc. --> 
</div> 

老JS

$(document).ready(function() { 
    if (!Modernizr.svg) { 
    var imgs = document.getElementsByTagName('img'); 
    var svgExtension = /.*\.svg$/; 
    var l = imgs.length; 
    for (var i = 0; i < l; i++) { 
     if (imgs[i] != undefined && imgs[i].src.match(svgExtension)) { 
     var img = $(imgs[i]); 
     var fallbackElement = $(img.data('fallback')); 
     if (fallbackElement != undefined && fallbackElement.length > 0) { 
      fallbackElement.removeClass('vh'); 
      img.remove(); 
     } else { 
      img.attr('src', imgs[i].src.slice(0, -3) + 'png'); 
     } 
     } 
    } 
    } 
}); 

Answer 2

我看到你更新了它。 SVG http://caniuse.com/svg的支持程度如何，我會追加回退（如果您不想支持no-js）。

這並沒有什麼意義。如果支持SVG，則使回退可見？您想要顯示該DIV並隱藏SVG。