RaphaelJS如何让内联SVG在Firefox3.6中工作？

Question

我一直在使用RaphaelJS，并意识到它可以在Firefox3.6.22中使用内联SVG (至少它是looks like it，或者我被Firebug欺骗了…)。

由于我自己的SVG没有显示出来，我想知道当Firefox 3.6 does not support blunt inlining of SVG出现时RaphaelJS是如何实现这一特性的。我(简单地)看了一下源码，也发现了内联SVG是如何在旧的火狐浏览器中工作的another answer。尽管如此，我还是坚持让它为我自己工作(即AJAX加载SVG并将其放入DOM中)。

Answer 1

我将回答我自己的问题：

1. Raphaël并没有做什么特别的事情(在这种情况下)。
2. 多亏了my post on the Raphaël Google Group的答案，我被指引到了正确的方向。"Inline SVG“的意思是”与普通HTML内联“(也在Mozilla blog post中解释)，因此不使用XHTML和适当的名称空间。我之前的理解是，我只能在某些浏览器(如Safari4或Firefox3.6)中通过<object>或<embed>使用SVG。这是错误的。

我通过将SVG作为XML字符串传递给jQuery's .html() method来添加SVG。这在大多数现代浏览器的当前版本中都工作得很好，但是方法名暗示，如果您想在html中不支持SVG的浏览器中添加SVG，那么这可能不是正确的方法。因此，我更改了代码并使用document.createElementNS将我的SVG直接添加到DOM。还有另一种方法可以批量注入我的SVG-XML (如Google groups线程中所述)，但我还没有时间研究它。

所以现在我让我的SVG在所有目标浏览器上都能工作，除了旧的IEs，这很好。示例代码：

svgContainer.appendChild(svgElement); svgContainer =document.getElementById(“svg容器”)，svgElement = document.createElementNS("http://www.w3.org/2000/svg"，"svg")，g= document.createElementNS("http://www.w3.org/2000/svg"，"g")；svgElement.setAttribute(“版本”，"1.1")；//添加svgElement.appendChild(g)；var