Firefox並沒有正確渲染SVG，其他瀏覽器都是這樣做的

Question

我是SVG和D3世界的新手，學習如同我執行的一樣。面對我目前正在從事的其中一個網站的問題。

要求：
我們要創建一個自定義圖表（類似於條形圖），有一組代表我的數據點和某些圖標是基於條形圖的數據類型嵌入到這些槓槓。該圖代表了一個人在整個職業生涯中取得的成就。在懸停欄上，我們顯示一個自定義彈出窗口，其中有一個簡要說明欄（請參閱下面的示例）。一些酒吧有一個額外的箭頭，表示酒吧是否代表了用戶目前正在追求的體驗。

迄今取得的進展：
正如你可以看到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的。路徑元素在錯誤的名稱空間中生成。

$('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') 

Answer 2

使用Firefox DOM Inspector進行檢查，您會看到形成圖標的路徑元素位於HTML命名空間中，而不是SVG命名空間，它將出現在它所需的位置。

您是否通過decodeHTMLEntities傳遞了此數據，可能是在錯誤的名稱空間中重新創建元素，您需要通過調試器逐步查看錯誤。

如果你保存了d3生成的頁面，那麼當它被任何UA重讀時，它將選擇正確的命名空間，這就是jsfiddle工作的原因。