是否可以在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>
吗?我已经有一段时间没有这样做了,但你可以在谷歌上搜索。