iOS未在其中显示SVG <img> 标签
[英]iOS not displaying SVG in <img> tag
问题描述
I have a simple <img> tag with a SVG source which is not displayed at all on Chrome and Safari on iOS (iPad 3, iOS 7.1). 
我有一个带有SVG源的简单<img>标签，该标签在iOS（iPad 3，iOS 7.1）的Chrome和Safari上根本没有显示。
Here is a jsfiddle with it. 这是一个jsfiddle。
The SVG is also displayed incorrectly on Safari on Windows 8.1 (it is squashed on the x-axis). SVG在Windows 8.1的Safari上也显示不正确（在x轴上被压扁）。
I have exported this SVG from Illustrator and it was created entirely in Illustrator. 我已经从Illustrator中导出了此SVG，它完全是在Illustrator中创建的。 I suspect there is something wrong with the SVG itself and these browsers cannot interpret that correctly, but I have no idea what it might be. 我怀疑SVG本身有问题，这些浏览器无法正确解释，但我不知道它可能是什么。
I have searched for previous cases, but usually people have problems with inline SVGs or object SVGs and none of the solutions I found apply to my case. 我已经搜索过以前的案例，但是通常人们会遇到内联SVG或对象SVG的问题，而我发现的任何解决方案都不适用于我的案例。
EDIT: Upon further investigation, I have found out that there is indeed an issue with my SVG image. 编辑：经过进一步调查，我发现我的SVG图像确实存在问题。 This blog post has a working <img> with SVG source, so there's proof that it works. 这篇博客文章在SVG源代码中有一个有效的<img> ，因此有证据证明它有效。
Also, using an <object> is not acceptable, because I also need to use this image as a background-image , which is also officially supported on iOS (and present in the blog post as well), but does not work with my image. 另外，使用<object>是不可接受的，因为我还需要将此图像用作background-image ，iOS上也正式支持该图像（并且也出现在博客文章中），但不适用于我的图像。
So my question becomes: are there pitfalls in creating a SVG image which can cause it to not display on certain browsers? 所以我的问题变成了：创建SVG图像是否会导致其无法在某些浏览器上显示的陷阱？
3 个解决方案
解决方案1
4 2015-05-05 18:14:43
I had this issue. 我有这个问题。 My svg was not appearing on iOS 7.x, but was working on iOS 8.x. 我的svg没有出现在iOS 7.x上，但是在iOS 8.x上工作。 The problem was with my svg file. 问题出在我的svg文件上。 When viewing the svg file in a text editor, it didn't have a width and height defined in the svg tag. 在文本编辑器中查看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>
After adding width and height attributes I was able to see my svg in my img tag. 添加width和height属性后，我可以在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">
... ...
解决方案2
2 2014-03-23 16:30:06
Try to embed your svg as object . 尝试将svg嵌入为object。 Also read this http://benfrain.com/attempting-to-fix-responsive-svgs-in-desktop-safari 另请阅读此http://benfrain.com/attempting-to-fix-sensitive-svgs-in-desktop-safari
Tested html bellow (no .js needed): 经过测试的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>
解决方案3
-2 2014-03-23 15:14:46
If your doing the SVG usage due to the lack of support of SVG natively - I would consider instead using SVGKit - https://github.com/SVGKit/SVGKit 如果您由于本身缺乏对SVG的支持而使用SVG-我会考虑使用SVGKit- https://github.com/SVGKit/SVGKit
I used it for a few demos I did on the fly and it worked great. 我将它用于即时进行的一些演示中，效果很好。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.