Firefox中的内联SVG

时间:2010-12-12 03:07:11

标签: firefox svg protovis

我有点难过这个。我使用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(点击“图库”)

再次感谢!

3 个答案:

答案 0 :(得分:4)

内联SVG仅在两种情况下适用于Firefox:

  • Firefox已启用实验HTML5 parser(即您每晚使用4.0)
  • 正在解析的文档不是HTML,而是XHTMLContent-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's article 'SVG: object or embed?',或使用SVGWeb

答案 1 :(得分:0)

确保使用object元素和结束标记的正确属性:

<object data="yourimage.svg"></object>

答案 2 :(得分:0)

This example可能对您有用,explanation。关于加载时间和MIME text / html的SVG渲染支持是ItsNat Java Web框架的支持功能,无论如何它受到this JS code的启发,后者在您的上下文(PHP)中对您有用。