Question

我在'img'标签中显示带有文本的SVG图像，但是，我们都知道android 2.1 / 2.3中的支持是有限的，并且svg中对文本的支持更加有限。（在其中使用此用户的大量用户）

因此，我试图（不是真正工作）提供一个'div'，其内容回退到SVG图像（代替* .png）。由于缺乏jQuery的知识，我使用的是Modernizr; Modernizr目前还没有用于其他任何事情。理想情况下，如果可能的话，我想完全删除Modernizr，这就是我在这里的原因：什么是最好的方法来解决这个问题？如果Modernizr实际上是检测支持的最佳方法，我将继续使用它，无论如何在document.ready之前完全从DOM中删除'img'标签？

div包含了日期的schema.org微数据，所以我只是在视觉上隐藏它。

或者...... 在'div'上使用背景图像并最初显示内容会更加语义准确吗？使用这种方法，我可以使用.no-svg，但仍然包括Modernizr。无论如何我对此更加自在，因为css对我来说更有意义。

或者...... 是否有更好的方法？因为我准备回到* .png，我还没有得到svg后备在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;
}

TEST JS

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

Answer 1

我看到你更新了它。根据SVG http://caniuse.com/svg的支持程度，我会附加后备（如果你不想支持no-js）。

这并没有多大意义。如果支持SVG，您可以看到后备吗？您希望显示该DIV并在相同的情况下隐藏SVG。

Answer 2

出于我的目的，我需要先前的答案有点不合时宜。

我结束了与同事的决议：

如果不支持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');
        }
      }
    }
  }
});

如果.svg失败，请显示div hide＆＃39; img＆＃39;

2 个答案: