显示
是否可以在 iOS 浏览器中的 中显示
内容而不使用
需要我将
内容存储在单独的文件中?
在 中嵌入
内容似乎适用于所有其他现代浏览器(IE9、Chrome,甚至 Window 上的 Safari!)。
我发现一些参考建议将内容类型更改为 'text/xml'
可能有效,但我无法更改它,因为我的代码作为 SharePoint 中移动服务器控件的一部分运行2010。
我的页面包含几个 区域,每个区域都显示一个简单的图表。这些图形的数据存储在序列化对象中,在绘制 svg 折线之前需要对其进行反序列化。由于反序列化过程非常耗时,我更喜欢一次性执行一次并生成所有图形,而不是生成对单个 svg 文件的资源引用(可以通过
标记引用) 。
编辑: 有迹象表明 iOS5 支持内联 。
Is it possible to display <svg>
content inside an <html>
in an iOS browser without the use of the <embed>
or <img>
tags which require me to store the <svg>
content in a separate file?
The embedding of <svg>
content inside <html>
seems to work on all other modern browsers (IE9, Chrome, even Safari on Window!).
I have found some references that suggest changing the content-type to 'text/xml'
might work, but I am not able to change it as my code is running as part of a mobile server control in SharePoint 2010.
My page contains several <svg>
areas, each of which displays a simple graph. The data for these graphs is stored in a serialized object which needs to be deserialized before the svg polylines can be drawn. Since the deserialization process is time-consuming I prefer to do it once and generate all graphs in a single pass, rather than generating resource references to individual svg files which can be referenced by an <embed>
tag.
Edit: There are indications that inline <svg>
is supported in iOS5.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
如果您需要将 SVG 直接嵌入到文档中,
请使用 XHTML(不仅仅是 HTML),并使用正确的 mime 类型来提供服务,您的 SVG 将在所有主要浏览器(包括 iPhone 和 iPad)上正常工作。
此示例文件在 XHTML 中使用内联 SVG,甚至在主机文档中使用 JavaScript 和 CSS 来操作 SVG:
http://phrogz.net/SVG/svg_in_xhtml5.xhtml
它在 iPhone/iPad 上运行良好。
如果您需要引用外部文件,
请使用
标签直接引用您的 SVG。这适用于 iOS。
例如,在您的 iPhone/iPad 上打开此文件:
http://phrogz.net/SVG/svg-via-img.html
哪些参考文献
http://phrogz.net/SVG/heart.svg
请注意,有 与在固定大小内渲染可变大小的 SVG 相关的 WebKit 错误
标签。 (它似乎是根据包含窗口的宽高比而不是
元素的尺寸来绘制 SVG 的宽高比。)如果您使用该测试文件调整浏览器窗口的大小。
If you need to embed the SVG directly in the document
Use XHTML (not just HTML), serve it with the correct mime type, and your SVG will work correctly in all major browsers, including on the iPhone and iPad.
This example file uses inline SVG in XHTML, and even uses JavaScript and CSS in the host document to manipulate the SVG:
http://phrogz.net/SVG/svg_in_xhtml5.xhtml
It works fine in iPhone/iPad.
If you need to reference an external file
Use the
<img>
tag to reference your SVG directly. This works on iOS.For example, open this on your iPhone/iPad:
http://phrogz.net/SVG/svg-via-img.html
which references
http://phrogz.net/SVG/heart.svg
Note that there is a bug with WebKit related to rendering variable-sized SVGs inside fixed-size
<img>
tags. (It appears to draw the aspect ratio for the SVG from the aspect ratio of the containing window instead of the dimensions of the<img>
element.) You can see the weirdness in Chrome or Safari if you resize your browser window with that test file.您可能需要在 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
You may need to use inline SVG inside an XHTML compound document. In this case, XML namespaces are used for both the HTML root element and the inline SVG element. See here for a relevant example:
http://www.croczilla.com/bits_and_pieces/svg/samples/dom1/dom1.xml
Other useful examples may be found here:
http://www.croczilla.com/bits_and_pieces/svg/samples
您是否尝试过使用
Have you tried using
<object>
? I haven't done this in a while but you can Google for that.