Firefox中的内联SVG

Question

我有点难过这个.我使用Protovis(一个JS库)渲染SVG可视化,它在Chrome和Firefox中运行良好.我将渲染的SVG保存在我的服务器上,并尝试使用PHP函数在"图库"视图中重新渲染它,这在Firefox中失败了.我所看到的只是SVG中的文本,而不是SVG.

我保存完整的svg内容,如下所示:

<svg height="220" width="880" stroke-width="1.5" stroke="none" fill="none" font-family="sans-serif" font-size="10px"><g transform="translate(30, 10)"><line stroke-width="1" 

我尝试过使用,<object>但所有这一切都是提示Firefox下载一个它找不到的插件.

它适用于FF4测试版,但我不明白为什么它甚至在Firefox 3.6中都不起作用.这是我应该放弃的吗？你可以在这里看到一个演示:

http://www.rioleo.org/protoviewer(点击"图库")

再次感谢!

Answer 1

内联 SVG 仅在两种情况下在 Firefox 中有效：

• Firefox 启用了实验性HTML5 解析器（即您使用的是 4.0 nightly）
• 被解析的文档不是 HTML 而是XHTML ( Content-type: application/xhtml+xml)

Rob 建议的方法object应该有效，只要单独的 SVG 文件来自您的服务器并且Content-type: image/svg+xml您使用正确的语法：

<object data="foo.svg" type="image/svg+xml" width="400" height="300">

请参阅Damian Cugley 的文章“SVG：对象还是嵌入？” 有关其他一些选项的详细信息，或使用SVGWeb。