我有一个简单的 <img>
带有 SVG 源的标记,在 iOS(iPad 3、iOS 7.1)上的 Chrome 和 Safari 上根本不显示。
Here是一个 jsfiddle。
SVG 在 Windows 8.1 上的 Safari 上也无法正确显示(它在 x 轴上被压扁)。
我已经从 Illustrator 导出了这个 SVG,它完全是在 Illustrator 中创建的。我怀疑 SVG 本身有问题,这些浏览器无法正确解释它,但我不知道它可能是什么。
我搜索过以前的案例,但通常人们对内联 SVG 或对象 SVG 有疑问,而我找到的解决方案都不适用于我的案例。
编辑:经过进一步调查,我发现我的 SVG 图像确实存在问题。 This blog post有工作 <img>
使用 SVG 源代码,因此有证据表明它有效。
此外,使用 <object>
是 Not Acceptable ,因为我还需要将此图像用作 background-image
,它在 iOS 上也得到官方支持(也出现在博客文章中),但不适用于我的图像。
所以我的问题变成了:创建 SVG 图像是否存在会导致其无法在某些浏览器上显示的缺陷?
最佳答案
我有这个问题。我的 svg 没有出现在 iOS 7.x 上,但在 iOS 8.x 上工作。问题出在我的 svg 文件上。在文本编辑器中查看 svg 文件时,它没有在 svg 标记中定义的宽度和高度。
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
<g>
...
</g>
</svg>
添加宽度和高度属性后,我能够在我的 img 标签中看到我的 svg。
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
...
关于javascript - iOS 不在 <img> 标签中显示 SVG,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22591605/