iOS 不在 <img> 标签中显示 SVG

Question

我有一个<img>带有 SVG 源的简单标签，它在 iOS（iPad 3、iOS 7.1）上的 Chrome 和 Safari 上根本不显示。

这是一个jsfiddle。

SVG 在 Windows 8.1 上的 Safari 上也显示不正确（它在 x 轴上被压扁）。

我已经从 Illustrator 导出了这个 SVG，它完全是在 Illustrator 中创建的。我怀疑 SVG 本身有问题，这些浏览器无法正确解释，但我不知道它可能是什么。

我搜索了以前的案例，但通常人们对内联 SVG 或对象 SVG 有问题，而且我找到的解决方案都不适用于我的案例。

编辑：经过进一步调查，我发现我的 SVG 图像确实存在问题。这篇博文有一个<img>使用 SVG 的源代码，所以有证据表明它是有效的。

此外，使用 an<object>是不可接受的，因为我还需要将此图像用作background-image，这在 iOS 上也得到官方支持（并且也出现在博客文章中），但不适用于我的图像。

所以我的问题变成了：在创建 SVG 图像时是否存在可能导致它无法在某些浏览器上显示的陷阱？

Answer 1

我有这个问题。我的 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">

...