ios - 使用<html>在iOS浏览器中显示<svg>，而不使用</html> </svg> <embed />标签

时间：2011-09-27 22:50:28

标签： ios html5 svg

是否可以在iOS浏览器中的<svg>内显示<html>内容，而无需使用<embed>或<img>代码要求我将<svg>内容存储在单独的文件中吗？

在<svg>内嵌入<html>内容似乎适用于所有其他现代浏览器（IE9，Chrome，甚至Safari on Window！）。

我发现一些建议将内容类型更改为'text/xml'可能有效，但我无法更改它，因为我的代码是作为SharePoint 2010中移动服务器控件的一部分运行的。

我的页面包含多个<svg>区域，每个区域都显示一个简单的图形。这些图的数据存储在序列化对象中，需要在绘制svg折线之前对其进行反序列化。由于反序列化过程非常耗时，我更喜欢这样做一次并在一次通过中生成所有图形，而不是生成可以由<embed>标记引用的单个svg文件的资源引用。

在iOS5中支持内联<svg>的

答案 0 :(得分：4)

如果您需要将SVG直接嵌入文档

使用XHTML（不仅仅是HTML），使用正确的mime类型提供服务，SVG将在所有主流浏览器中正常运行，包括在iPhone和iPad上。

此示例文件在XHTML中使用内联SVG，甚至在主文档中使用JavaScript和CSS来操作SVG：
http://phrogz.net/SVG/svg_in_xhtml5.xhtml

在iPhone / iPad上运行良好。

使用<img>标记直接引用您的SVG。这适用于iOS。

请注意，a bug with WebKit与在固定大小的<img>标记内呈现可变大小的SVG相关。（它似乎从包含窗口的宽高比而不是<img>元素的尺寸绘制SVG的宽高比。）如果您使用该窗口调整浏览器窗口的大小，您可以在Chrome或Safari中看到奇怪的内容。测试文件。

答案 1 :(得分：3)

您可能需要在XHTML复合文档中使用内联SVG。在这种情况下，XML名称空间用于HTML根元素和内联SVG元素。请参阅此处获取相关示例：
http://www.croczilla.com/bits_and_pieces/svg/samples/dom1/dom1.xml

答案 2 :(得分：0)

您是否尝试过使用<object>？我有一段时间没有这样做，但你可以谷歌。