RaphaelJS如何让内联SVG在Firefox 3.6中工作？

Question

我在玩RaphaelJS时意识到它可以在Firefox 3.6.22中使用内联SVG（至少看起来是这样，或者我被Firebug愚弄了...）。

由于我的SVG没有显示出来，我想知道当Firefox 3.6不支持SVG的钝化内联时，RaphaelJS是如何实现此功能的。我（简要地）查看了源代码，并找到了另一个答案，说明旧版Firefox浏览器中如何使用内联SVG。尽管如此，我仍然无法让它为我工作（即通过AJAX加载SVG并将其放置到DOM中）。

- Wolfram

Answer 1

我将回答自己的问题:

1. Raphaël is not really doing anything special (in this case).

2. Thanks to the answers to my post on the Raphaël Google Group I was pointed in the right direction. "Inline SVG" means "inline with common HTML" (also explained in a Mozilla blog post), so without using XHTML and proper namespacing. My prior understanding was that I could use SVG only via <object> or <embed> in some browsers (like Safari 4 or Firefox 3.6)... which is wrong.

   I was adding SVG by passing it as an XML string to jQuery's .html() method. This works fine in the current versions of most modern browsers but the method name gives a hint that this might not be the right way if you want to add SVG in a browser that does not support SVG in html. So I changed my code and used document.createElementNS to add my SVG directly to the DOM. There is another way to bulk-inject my SVG-XML (as mentioned in the Google groups thread), but I did not have the time to look into it yet.

   So now I got my SVG working in all targeted browsers but the older IEs, which is nice. Sample code:

   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);
   

- Wolfram