Firefox 不能正确渲染 SVG，其他浏览器可以

Question

我是 SVG 和 D3 领域的新手，在我实施的过程中学习。我目前正在处理的一个网站遇到问题。

要求：
我们想要创建一个自定义图表（类似于条形图），其中包含一组代表我的数据点的条形图，并且某些图标根据条形图数据的类型嵌入到这些条形图中。该图代表了一个人在整个职业生涯中的成就。在栏悬停时，我们会显示一个自定义弹出窗口，其中包含栏的简要说明（参见下面的示例）。一些条有一个额外的箭头，表示该条是否代表用户当前正在追求的体验。

目前的进展：
正如您在 TIMELINE 部分下看到的 my profile。

那么，怎么了？
在 Chrome 上一切正常（从屏幕截图中可以看出）。所有其他浏览器在没有图标的情况下呈现图形。您可以在 Chrome 和 Firefox 上查看我的个人资料。

我复制了 d3 生成的 SVG HTML 代码并将其粘贴到 jsfiddle 中以在所有浏览器上进行测试，发现所有浏览器都在渲染它：（忽略颜色，我没有对其应用 CSS，但图标显示） http://jsfiddle.net/EbpPG/1/

See JS fiddle link

查看我的个人资料以查看图表。生成图表的逻辑可以在chart.js文件createTimelineChart()函数中找到。

有人可以看看它并告诉我我犯了什么错误吗？

Answer 1

问题显然在于您如何动态生成 SVG。路径元素是在错误的命名空间中生成的。这通常发生在您使用诸如 jQuery 的附加字符串之类的东西时：

$('svg').append('<path d="m0,0 h100"/>')

这将生成一个不存在的 HTML 命名空间路径元素。 （有趣的是，Chromium 甚至没有在开发者工具中展示它。）

Firebug 擅长向您展示此类问题。在 HTML 面板中，错误命名空间的元素以较浅的颜色显示。在 HTML 面板中右键单击它们，您可以选择在 DOM 面板中检查，在那里您可以看到 namespaceURI 属性是什么。

所以，要么使用普通的 DOM 操作方法，要么，如果您已经在使用 d3，

d3.select('svg').append('svg:path').attr('d','m0,0 h100')

Answer 2

使用 Firefox DOM Inspector 查看，您会发现形成图标的路径元素位于 HTML 命名空间中，而不是它出现所需的 SVG 命名空间中。

您是否通过 decodeHTMLEntities 传递此数据，这可能是在错误的命名空间中重新创建元素，您需要使用调试器逐步检查它何时出错。

如果您保存 d3 生成的页面，那么当任何 UA 重新读取它时，它将选择正确的命名空间，这就是 jsfiddle 工作的原因。