Firefox 中的内联 SVG答案

【问题标题】：Inline SVG in FirefoxFirefox 中的内联 SVG
【发布时间】：2010-12-12 03:07:11
【问题描述】：

我对这个有点难过。我正在使用 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（点击“图库”）

再次感谢！

【问题讨论】：

你试过header("Content-type: image/svg+xml");
这不会导致页面不可见吗？

标签： firefox svg protovis

【解决方案1】：

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

Firefox 已启用实验性 HTML5 parser（即，您使用的是 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's article 'SVG: object or embed?'，或使用SVGWeb。

【讨论】：

我把文件中的content-type meta标签改成xhtml+xml为什么不行？
@Rio 这与元标记无关，重要的内容类型在 Web 服务器发送的 HTTP 标头中。根据 pastjean 的评论，这通常可以从服务器端脚本语言控制。如果您没有使用服务器端脚本语言，请检查您的 Web 服务器配置，或尝试将文件扩展名更改为 .xhtml。

【解决方案2】：

确保您使用正确的属性与对象元素和结束标记：

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

【讨论】：

好点，我进行了更改，现在它看起来像 Chrome 和 Firefox 中的 iFrame（如果您想查看，代码仍在“图库”选项卡中），最后一个框.

【解决方案3】：

This example 可能对你有用，explanation。加载时间和 MIME 文本/html 的 SVG 渲染支持是 ItsNat Java Web 框架的支持功能，无论如何它的灵感来自 this JS code，后者在您的上下文中对您有用（PHP）。

【讨论】：