Firefox不能正確渲染SVG，其他瀏覽器也是如此

Question

我是SVG和D3的新手，在我實施的過程中學習。 面對我目前正在處理的其中一個網站的問題。

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

迄今取得的進展：
正如您可以在TIMELINE部分看到我的個人資料 。

那么，什么錯了？
Chrome上的一切正常（如截圖所示）。 所有其他瀏覽器在沒有圖標的情況下渲染圖形 您可以在Chrome和Firefox上查看我的個人資料。

我復制了d3生成的SVG HTML代碼並將其粘貼到jsfiddle中以在所有瀏覽器上測試它並發現所有瀏覽器都在渲染它:(忽略顏色，我沒有應用CSS，但圖標顯示） http：/ /jsfiddle.net/EbpPG/1/

See JS fiddle link

檢查我的個人資料以查看圖表。 生成圖形的邏輯可以在chart.js文件createTimelineChart（）函數中找到。

有人可以看看它，讓我知道我犯的是什么錯誤？

Answer 1

問題顯然是如何動態生成SVG。 path元素是在錯誤的命名空間中生成的。 這通常發生在你使用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工作的原因。