Comment RaphaelJS intègre-t-il SVG pour fonctionner dans Firefox 3.6?

Question

Je jouais avec RaphaelJS et je me suis rendu compte que le SVG en ligne fonctionnait sous Firefox 3.6.22 (au moins c'est looks like it, ou suis-je berné par Firebug ...).

Comme mon propre SVG n'apparaît pas, je me demandais comment RaphaelJS accomplit cette fonctionnalité quand Firefox 3.6 does not support blunt inlining of SVG. J'ai (brièvement) regardé la source et j'ai également trouvé another answer comment SVG en ligne peut fonctionner dans les navigateurs Firefox plus anciens. Pourtant, je suis coincé pour que cela fonctionne pour moi-même (c'est-à-dire AJAX-chargement SVG et le plaçant dans le DOM).

Answer 1

Je vais répondre à ma propre question:

1. Raphaël est pas vraiment fait quelque chose de spécial (dans ce cas).

2. Grâce aux réponses à my post on the Raphaël Google Group j'ai été pointé dans la bonne direction. "Inline SVG" signifie "en ligne avec HTML commun" (également expliqué dans un Mozilla blog post), donc sans utiliser XHTML et un espace de noms approprié. Ma compréhension précédente était que je ne pouvais utiliser SVG que via <object> ou <embed> dans certains navigateurs (comme Safari 4 ou Firefox 3.6) ... ce qui est faux.

   J'ajoutais SVG en le passant comme une chaîne XML à jQuery's .html() method. Cela fonctionne très bien dans les versions actuelles de la plupart des navigateurs modernes, mais le nom de la méthode donne un indice que ce n'est pas la bonne solution si vous voulez ajouter SVG dans un navigateur qui ne supporte pas SVG dans html. J'ai donc changé mon code et utilisé document.createElementNS pour ajouter mon SVG directement au DOM. Il y a une autre façon d'injecter en bloc mon fichier SVG-XML (comme mentionné dans le fil de discussion de Google), mais je n'ai pas eu le temps d'y jeter un coup d'œil.

   Alors maintenant j'ai eu mon SVG fonctionnant dans tous les navigateurs ciblés mais les anciens IE, ce qui est sympa. Exemple de 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);