Firefox中的内联SVG

Question

我对这个问题有些困惑。我使用JS库Protovis来渲染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 beta中可以工作，但我不明白为什么它甚至在Firefox 3.6中也无法工作。我应该放弃吗？您可以在此处查看演示：http://www.rioleo.org/protoviewer（单击“gallery”）。再次感谢！

- Rio

---

你尝试过使用header("Content-type: image/svg+xml");吗？ - pastjean

这难道不会导致页面无法查看吗？ - Rio

Answer 1

仅在以下两种情况下，内联SVG才能在Firefox中工作：

• Firefox启用了实验性的HTML5解析器（即您使用的是4.0夜间版）
• 被解析的文档不是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。

- robertc

---

如果我将文件中的内容类型元标记更改为xhtml+xml，为什么它不起作用？ - Rio

@Rio 这与元标记无关，真正重要的是由Web服务器发送的HTTP头中的内容类型。这通常可以通过服务器端脚本语言进行控制，如pastjean的评论所述。如果您没有使用服务器端脚本语言，请检查您的Web服务器配置，或尝试将文件扩展名更改为.xhtml。 - robertc

Answer 2

请确保在使用 object 元素和结束标签时使用正确的属性：

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

- Rob

---

好的，我已经进行了更改，现在在Chrome和Firefox中它看起来像一个iFrame（如果您想查看，代码仍然在“画廊”选项卡中的最后一个框中）。 - Rio

Answer 3

这个例子可能对你有用，解释。在加载时支持SVG渲染和MIME text/html是ItsNat Java Web框架的一个支持特性，不过它受到了这个JS代码的启发，后者在你的上下文（PHP）中可能对你有用。

- jmarranz