RaphaelJS如何讓內聯SVG在Firefox 3.6中工作？

我正在玩RaphaelJS，並意識到它獲得內聯SVG在Firefox 3.6.22中工作（至少它是looks like it，還是我被Firebug騙了...）。RaphaelJS如何讓內聯SVG在Firefox 3.6中工作？

由於我自己的SVG沒有顯示，所以我想知道當RaphaelJS在Firefox 3.6 does not support blunt inlining of SVG時如何完成此功能。我（短暫地）看了看源代碼，還發現another answer內聯SVG如何在舊版Firefox瀏覽器中工作。不過，我堅持讓它爲自己工作（即，將AJAX加載到SVG並將其放入DOM中）。

來源

2011-09-19 Wolfram

我要回答我的問題：

拉斐爾是不是真的有什麼特別的（在這種情況下）。
感謝my post on the Raphaël Google Group的回答，我指出了正確的方向。「內聯SVG」表示「與普通HTML內聯」（也在Mozilla blog post中解釋），因此不使用XHTML和正確的命名空間。我之前的理解是，我只能通過<object>或<embed>在某些瀏覽器（如Safari 4或Firefox 3.6）中使用SVG ......這是錯誤的。

我通過將它作爲XML字符串傳遞給jQuery's .html() method來添加SVG。這在當前最流行的瀏覽器版本中工作正常，但方法名稱提示，如果您想在不支持SVG的瀏覽器中添加SVG，這可能不是正確的方法。所以我改變了我的代碼，並使用document.createElementNS將我的SVG直接添加到DOM。還有一種方法可以批量注入我的SVG-XML（如Google小組討論中提到的那樣），但我沒有時間查看它。

所以現在我的SVG可以在所有目標瀏覽器上工作，但是老版本的IE瀏覽器很好用。示例代碼：
```
var svgContainer = document.getElementById("svg-container"), 
    svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg"), 
    g = document.createElementNS("http://www.w3.org/2000/svg", "g"); 
svgElement.setAttribute("version", "1.1"); 
// Add stuff to the group 
svgElement.appendChild(g); 
svgContainer.appendChild(svgElement); 
```

來源

2011-09-21 20:40:12 Wolfram

RaphaelJS如何讓內聯SVG在Firefox 3.6中工作？

回答

相關問題