使用<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>

修改 There are indications

3 个答案:

答案 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。

例如,在iPhone / iPad上打开它:
http://phrogz.net/SVG/svg-via-img.html
参考文献 http://phrogz.net/SVG/heart.svg

请注意,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

其他有用的例子可以在这里找到:
http://www.croczilla.com/bits_and_pieces/svg/samples

答案 2 :(得分:0)

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