SVG精灵在Safari中不起作用

Question

对于Web开发人员来说，Safari并不比IE好。这是我在Safari中看到的问题。

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

HTML code：

<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>

HTML中的<img>通过在精灵网址中附加<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仅支持版本7中的xxx.svg#<viewboxId>等片段标识符，但不支持其他版本，我在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">