SVG sprite在Safari中不起作用

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

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

HTML代码：

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

SVG雪碧代码：

<?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由精灵URL追加 “＃” +的<view> ID定位<svg>。这种方式适用于Chrome，Firefox甚至IE，但不适用于Safari。

它看起来像在Chrome：

它看起来像在Safari 5和Safari 9：

所以这基本上意味着在<img>附加#viewId无法通过ID识别视图，这是不可接受的。

我在想，如果有人看过类似的情况，可以帮我。

顺便说一句，我也试过另一种解决方案。

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

该解决方案显示了精灵的正确SVG，但是它会先消失，然后重新出现在AJAX调用，这是不好的用户体验，无论是。

来源

2016-03-04 shaosh

我自己在这里回答了我自己的大部分问题。我不知道这是一件快乐的事情或令人不安的事情。

我想了解如何在第二天解决这个问题后，我发布在这里。

根据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>在绝大多数的狩猎中都不起作用。它发生在<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">

来源

2016-03-07 17:40:25 shaosh

谢谢。将其转换为脚本： https://codepen.io/loominade/pen/oGgqBg – loominade

SVG sprite在Safari中不起作用

回答

相关问题