javascript - iOS 未在 <img> 标签中显示 SVG
<p><p>我有一个带有 SVG 源的简单 <code><img></code> 标记，它根本不显示在 iOS(iPad 3、iOS 7.1)的 Chrome 和 Safari 上。</p>
<p> <a href="http://jsfiddle.net/7scVV/3/" rel="noreferrer noopener nofollow">Here</a>是一个 jsfiddle 。</p>
<p>SVG 在 Windows 8.1 上的 Safari 上也显示不正确(它在 x 轴上被挤压)。</p>
<p>我从 Illustrator 导出了这个 SVG，它完全是在 Illustrator 中创建的。我怀疑 SVG 本身有问题，这些浏览器无法正确解释，但我不知道它可能是什么。</p>
<p>我搜索过以前的案例，但通常人们在使用内联 SVG 或对象 SVG 时遇到问题，而我找到的解决方案都不适用于我的案例。</p>
<p>编辑:经过进一步调查，我发现我的 SVG 图像确实存在问题。 <a href="http://blog.dholbert.org/2010/10/svg-as-image.html" rel="noreferrer noopener nofollow">This blog post</a>有一个工作的 <code><img></code> 与 SVG 源，所以有证据证明它工作。</p>
<p>另外，使用 <code><object></code> 是 Not Acceptable ，因为我还需要将此图像用作 <code>background-image</code>，这也是 iOS 官方支持的(并且也出现在博客文章中)，但不适用于我的图片。</p>
<p>所以我的问题变成了:在创建 SVG 图像时是否存在可能导致其无法在某些浏览器上显示的陷阱？</p></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>我遇到了这个问题。我的 svg 没有出现在 iOS 7.x 上，但在 iOS 8.x 上运行。问题出在我的 svg 文件上。在文本编辑器中查看 svg 文件时，它没有在 svg 标签中定义宽度和高度。</p>
<pre><code><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>
</code></pre>
<p>添加 <strong>width 和 height</strong> 属性后，我可以在我的 img 标签中看到我的 svg。</p>
<pre><code><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">
</code></pre>
<p>
...
</p></p>
<p style="font-size: 20px;">关于javascript - iOS 未在 <img> 标签中显示 SVG，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/22591605/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/22591605/
</a>
</p>
页:
[1]