在<svg>不使用<html>标签的情况下在iOS浏览器中显示<embed>



是否可以在iOS浏览器中显示<html>内的<svg>内容而不使用<embed><img>标签,因为这些标签要求我将<svg>内容存储在单独的文件中?

<html>中嵌入<svg>内容似乎适用于所有其他现代浏览器(IE9、Chrome,甚至Windows上的Safari!(。

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

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

编辑:有迹象表明iOS5支持内联<svg>

如果需要将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

请注意,WebKit存在一个错误,该错误与在固定大小的<img>标记中呈现可变大小的SVG有关。(它似乎是根据包含窗口的纵横比而不是<img>元素的尺寸来绘制SVG的纵横比。(如果使用该测试文件调整浏览器窗口的大小,您可以在Chrome或Safari中看到这种奇怪之处。

您可能需要在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

您尝试过使用<object>吗?我已经有一段时间没有这样做了,但你可以在谷歌上搜索。

最新更新