Firefox并没有正确渲染SVG，其他浏览器都是这样做的

我是SVG和D3世界的新手，学习如同我执行的一样。面对我目前正在从事的其中一个网站的问题。Firefox并没有正确渲染SVG，其他浏览器都是这样做的

要求：
我们要创建一个自定义图表（类似于条形图），有一组代表我的数据点和某些图标是基于条形图的数据类型嵌入到这些杠杠。该图代表了一个人在整个职业生涯中取得的成就。在悬停栏上，我们显示一个自定义弹出窗口，其中有一个简要说明栏（请参阅下面的示例）。一些酒吧有一个额外的箭头，表示酒吧是否代表了用户目前正在追求的体验。

迄今取得的进展：
正如你可以看到my profile下时间表部分。

那么，什么是错的？
一切工作正常（从屏幕截图中可以看到）在Chrome上。所有其他浏览器呈现没有图标的图形。您可以在Chrome和Firefox上查看我的个人资料。

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

See JS fiddle link

检查我的配置文件，看看图。生成图形的逻辑可以在chart.js文件中找到，createTimelineChart（）函数。

有人可以看看它，让我知道我犯的错误是什么？

来源

2014-02-22 Hari

我怀疑嵌入的'' meetamit

问题很明显，你是如何动态生成SVG的。路径元素在错误的名称空间中生成。

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

这将生成一个HTML命名空间中的路径元素，它不存在：这时候你使用像jQuery的追加一个字符串通常发生。（有趣的是，Chromium甚至没有在开发工具中显示它。）

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

因此，使用普通的DOM处理方法，或者，如果你已经在使用D3反正

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

来源

2014-02-22 09:48:19

谢谢托马斯！这就像一个魅力！既然你也给了我什么动态地添加一个路径到我的SVG，你将成为选择的答案。对不起@罗伯特:)你们两个都知道问题出在哪里。万分感谢！！！ – Hari

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

您是否通过decodeHTMLEntities传递了此数据，可能是在错误的名称空间中重新创建元素，您需要通过调试器逐步查看错误。

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

来源

2014-02-22 09:41:24

我想你比我更快 –

谢谢罗伯特的回答。很有帮助。 – Hari

Firefox并没有正确渲染SVG，其他浏览器都是这样做的

回答

相关问题