SVG精灵在Safari中不起作用

Question

对于Web开发人员而言,Safari并不比IE更好.这是我在Safari中看到的问题.

我正在尝试使用SVG精灵在我的网页中加载产品图标.

HTML代码:

<img src="https://www.abc123.com/icon_sprite.svg#amex">

SVG Sprite代码:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="276" height="224" viewBox="0 0 276 224" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <view id="affiliate-programs" viewBox="148 0 32 32"/>
    <svg width="32" height="32" viewBox="0 0 32 32" x="148"><path .../></svg>
    <view id="alipay" viewBox="0 64 49 32"/>
    <svg width="49" height="32" viewBox="0 0 49 32" y="64"><path .../></svg>
    <view id="amex" viewBox="50 0 49 32"/>
    <svg width="49" height="32" viewBox="0 0 49 32" x="50"><path .../></svg>
    <view id="auction" viewBox="148 64 32 32"/>
    <svg width="32" height="32" viewBox="0 0 32 32" x="148" y="64"><path .../></svg>
    <view id="backorder-domain-service" viewBox="180 128 32 32"/>
    <svg width="32" height="32" viewBox="0 0 32 32" x="180" y="128"><path .../></svg>
    ...
    ...
</svg>

在<img>HTML中找到<svg>通过添加"#" +的ID <view>在精灵网址.这种方式适用于Chrome,Firefox甚至IE,但不适用于Safari.

它在Chrome中的样子:

它在Safari 5和Safari 9中的外观如何:

所以它基本上意味着附加#viewId的内容<img>无法通过ID识别视图,这是不可接受的.

我想知道是否有人见过类似的案件,可以帮助我.

顺便说一句,我也尝试了另一种解决方案.

<object data="https://www.abc123.com/icon_sprite.svg#amex" type="image/svg+xml"></object>

这个解决方案显示精灵的正确svg,但它会先消失,然后在AJAX调用期间重新出现,这也不是很好的用户体验.

Answer 1

我自己在这里回答了大部分问题.我不知道这是一件幸福或令人心烦的事情.

在我在这里发布之后的第二天,我想出了如何解决这个问题.

根据https://www.broken-links.com/2012/08/14/better-svg-sprites-with-fragment-identifiers/,Safari仅支持xxx.svg#<viewboxId>版本7中的片段标识符,但不支持其他版本,我在Sauce Labs证实了这一点.它是比IE更糟糕的浏览器.

好吧,没有更多的抱怨.让我们谈谈解决方案,这是最重要的事情.

确实片段标识符xxx.svg#<viewboxId>在大多数Safaris中都不起作用.它发生在<img>,但不是在<embed>.因此对于Safari,我们可以使用<embed>加载片段标识符.

如何区分浏览器:

function isSafari() {
  if (navigator && navigator.userAgent) {
    var userAgent = navigator.userAgent;
    var isChrome = userAgent.indexOf('Chrome') > -1;
    var isSafari = userAgent.indexOf('Safari') > -1;

    if ((isChrome) && (isSafari)) {
      isSafari = false;
    }
    return isSafari;
  }
  return false;
}

在Safari中:

<embed id="embedSvg" class="pi_svg" src="https://www.abc123.com/icon_sprite.svg#amex" type="image/svg+xml"></embed>

在非Safari中:

<img class="pi_svg" src="https://www.abc123.com/icon_sprite.svg#amex">