iOS不显示SVG在<img>标签

iOS not displaying SVG in <img> tag

本文关键字：img 标签 SVG iOS 显示      更新时间：2023-09-26

我有一个简单的<img>标记与SVG源，这是不显示在Chrome和Safari上的iOS (iPad 3, iOS 7.1)。

这是一个简单的例子。

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

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

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

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

同样，使用<object>是不可接受的，因为我还需要将此图像用作background-image，这也是iOS官方支持的(并且在博客文章中也有)，但与我的图像不兼容。

所以我的问题是:是否有陷阱在创建SVG图像可能导致它不显示在某些浏览器上?

我有这个问题。我的svg没有出现在iOS 7上。但当时正在开发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">

…

尝试将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>

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

我用它做了一些我在飞行中做的演示，它工作得很好。

相关文章：