SVG sprite在Safari中不起作用 [英] SVG sprite not work in Safari
问题描述
我正尝试使用SVG sprite在我的网页中加载产品图标。
HTML代码：
< img src =https： //www.abc123.com/icon_sprite.svg#amex\">
SVG Sprite代码：
<？xml version =1.0encoding =utf-8？>
<！DOCTYPE svg PUBLIC - // W3C // DTD SVG 1.1 // ENhttp://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\">
< svg width =276height =224viewBox =0 0 276 224xmlns =http://www.w3.org/2000/svgxmlns：xlink =http：/ /www.w3.org/1999/xlink\">
< view id =affiliate-programsviewBox =148 0 32 32/>
< svg width =32height =32viewBox =0 0 32 32x =148>< path ... />< / svg>
< view id =alipayviewBox =0 64 49 32/>
< svg width =49height =32viewBox =0 0 49 32y =64>< path ... />< / svg>
< view id =amexviewBox =50 0 49 32/>
< svg width =49height =32viewBox =0 0 49 32x =50>< path ... />< / svg>
< view id =auctionviewBox =148 64 32 32/>
< svg width =32height =32viewBox =0 0 32 32x =148y =64>< path ... />< / svg> ;
< view id =backorder-domain-serviceviewBox =180 128 32 32/>
< svg width =32height =32viewBox =0 0 32 32x =180y =128>< path ... />< / svg> ;
...
...
< / svg>
HTML中的< img> 通过在精灵url中附加＃+ id < view> 来<
在Chrome中看起来如何：
它在Safari 5和Safari 9中的外观如何：
所以它基本上意味着附加的 #viewId 在< img> 中无法识别ID，这是不可接受的。
我想知道是否有人看过类似的情况，可以帮助我。
顺便说一下，我也尝试了另一种解决方案。
< object data =https://www.abc123.com/icon_sprite.svg#amextype =image / SVG + xml的>< /对象>
此解决方案显示精灵的正确svg，但它会先消失然后再次出现AJAX调用，这也不是很好的用户体验。
我自己在这里回答了我自己的大部分问题。我不知道这是一件令人高兴的事情或令人不安的事情。
我在这里发布后，在第二天就解决了这个问题。
根据 https://www.broken-links.com/2012/08/14/better-svg-sprites-with-fragment-identifiers/ ，Safari只支持片段标识符，如<$版本7中的c $ c> xxx.svg＃< viewboxId> ，但没有其他版本，我已在Sauce Labs中确认。这是一个比IE更差的浏览器。
好吧，没有更多的投诉。我们来谈谈解决方案，这是最重要的。
确实，片段标识符 xxx.svg＃< viewboxId> 不适用于大多数的旅行。它发生在< img> 中，但不在< embed> 中。因此，对于Safari，我们可以使用< embed> 来加载片段标识符。 b
$ b
如何区分浏览器：
函数isSafari（）{
if（navigator&& navigator.userAgent）{
var userAgent = navigator.userAgent;
var isChrome = userAgent.indexOf（'Chrome'）> -1;
var isSafari = userAgent.indexOf（'Safari'）> -1; （（isChrome）&&（isSafari））{
isSafari = false;
if
}
return isSafari;
}
返回false;
在Safari中：
< embed id =embedSvgclass =pi_svgsrc =https://www.abc123.com/icon_sprite.svg#amextype =image / svg + XML>< /嵌入>
在非Safari中：
< img class =pi_svgsrc =https://www.abc123.com/icon_sprite.svg#amex>
Safari is not better than IE for a web developer. Here is the issue I saw in Safari.
I am trying to use an SVG sprite to load product icon in my web page.
HTML code:
<img src="https://www.abc123.com/icon_sprite.svg#amex">
SVG Sprite Code:
<?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>
The <img> in HTML locate the <svg> by appending "#" + id of <view> in the sprite url. This way works in Chrome, Firefox, and even IE, but not in Safari.
How it looks like in Chrome:
And how it looks like in Safari 5 and Safari 9:
So it basically means the appended #viewId in <img> can't recognize the view by ID, which is unacceptable.
I am wondering if anyone has seen similar cases and could help me out.
By the way, I also tried another solution.
<object data="https://www.abc123.com/icon_sprite.svg#amex" type="image/svg+xml"></object>
This solution display the correct svg of the sprite, however it will first disappear and then re-appear during AJAX calls, which is not good user experience either.
I answered most of my own questions here by myself. I don't know it is a happy thing or upsetting thing.
I figured out how to fix this issue in the next day after I posted it here.
According to https://www.broken-links.com/2012/08/14/better-svg-sprites-with-fragment-identifiers/, Safari only supports the fragment identifier like xxx.svg#<viewboxId> in Version 7, but not other versions, which I've confirmed in Sauce Labs. It is an even worse browser than IE.
Well, no more complaint. Let's talk about the solution, which is the most important thing.
It is true the fragment identifier xxx.svg#<viewboxId> does not work in most of Safaris. It happens in <img>, but not in <embed>. So for Safari, we can use <embed> to load fragment identifier.
How to differentiate browser:
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;
}
In Safari:
<embed id="embedSvg" class="pi_svg" src="https://www.abc123.com/icon_sprite.svg#amex" type="image/svg+xml"></embed>
In non-Safari:
<img class="pi_svg" src="https://www.abc123.com/icon_sprite.svg#amex">
这篇关于SVG sprite在Safari中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
