Question

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

Here是一个jsfiddle。

在Windows 8.1上的Safari上也会错误地显示SVG（它在x轴上被压扁）。

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

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

编辑：经过进一步调查，我发现我的SVG图像确实存在问题。 This blog post有一个带有SVG源的<img>，因此可以证明它有效。

另外，使用<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">

...

Answer 2

尝试将svg嵌入为对象。另请阅读此http://benfrain.com/attempting-to-fix-responsive-svgs-in-desktop-safari

测试的html贝娄（需要.js）：

<html>
<head>
<style>
object {
width: 100%;
display: block;
height: auto;
position: relative;
padding-top: 0;
} 
svg {
width: 100%;
height: 100%;
/* position: absolute;
top: 0;
left: 0;*/
} 
</style>
</head>
<body>
<object data="http://monovertex.com/static/Logo.svg" type="image/svg+xml">
<img src="http://monovertex.com/static/Logo.svg"  width="200" height="200"/>
</object>

 </body></html>

Answer 3

如果由于缺乏对SVG的支持而使用SVG - 我会考虑使用SVGKit - https://github.com/SVGKit/SVGKit

我用它做了一些我在飞行中做的演示，效果很好。

iOS不在<img/>标记中显示SVG

3 个答案: