Accéder aux données SVG via JavaScript

Lorsqu'un navigateur web charge un fichier SVG, (à peu près) analyse le flux d'octets et crée un DOM structure dans la mémoire pour le fichier SVG. C'est cette représentation en mémoire qui est modifiée lorsque le script crée dynamiquement et ajoute de nouveaux éléments dans le document.

Vous pouvez voir un exemple très simple de ce sujet ici:

http://phrogz.net/svg/svg_in_xhtml5.xhtml

Le fichier SVG charges avec un cercle à l'arrière-plan pour le visage, puis JavaScript crée dynamiquement les yeux et le nez et ajoute que les enfants de l'élément SVG.

Il y a trois façons je sais que vous pouvez accéder à ces informations et en faire une toile:

1. Vous pouvez parcourir le DOM des éléments de vous-même, et la question de toile contexte commandes de dessin:

   var svg = document.getElementsByTagName('svg')[0];
   var kids = svg.childNodes;
   for (var i=0,len=kids.length;i<len;++i){
     var kid = kids[i];
     if (kid.nodeType!=1) continue; //skip anything that isn't an element
     switch(kid.nodeName){
       case 'circle':
         //...
       break;
       case 'path':
         //...
       break;
       //...
     }
   }

   Voir le SVG DOM de référence pour plus d'informations sur les propriétés et les méthodes disponibles pour vous, ou simplement utiliser le DOM Core 2 méthodes de récupérer les propriétés. Pour plus de simplicité, vous pouvez utiliser celui-ci.

   Par exemple, vous pouvez accéder à la (non-SMIL animation) cx du cercle à l'aide de la SVG DOM via var cx = kid.cx.baseVal.value; ou vous pouvez simplement faire var cx = kid.getAttribute('cx');.

   Cela va être simple où SVG et Canvas ont les mêmes commandes (par exemple, rect ou line), un peu de travail où ils ne correspondent pas exactement (par exemple circle contre arcTopolyline comme une série de lineTo commandes), et beaucoup de travail pour le path élément et son de nombreuses commandes de dessin.

2. Par cette réponse et ce documentutilisez le XMLSerializer interface pour obtenir les SVG en arrière comme le balisage, l'utiliser directement comme source d'un imgpuis drawImage que sur la toile. À l'aide de mon exemple ci-dessus:

   var svg_xml = (new XMLSerializer).serializeToString(svg);
   console.log(svg_xml);
   //"<svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" viewBox="-350 -250 700 500">
   //<circle r="200" class="face" fill="red"/>
   //<path fill="none" class="face" transform="translate(-396,-230)" d="M487.41,282.411c-15.07,36.137-50.735,61.537-92.333,61.537         c-41.421,0-76.961-25.185-92.142-61.076"/>
   //<circle cx="-60" cy="-50" r="20" fill="#000"/>
   //<circle cx="60" cy="-50" r="20" fill="#000"/>
   //</svg>"
   var ctx = myCanvas.getContext('2d');
   var img = new Image;
   img.onload = function(){ ctx.drawImage(img,0,0); };
   img.src = "data:image/svg+xml;base64,"+btoa(svg_xml);

   Si vous avez SVG en XHTML (comme dans mon exemple), la sérialisation de ne pas capturer les styles définis en dehors de la SVG bloc (comme dans mon exemple) et donc ils ne seront pas appliquées à l'image.

   Noter que par cette question/réponse (mine de), vous devez définir la onload attribut avant vous définissez la src pour les données de l'URL si vous voulez IE9 compatibilité.

   Malheureusement, en raison de ce qui peut ou peut ne pas être un bugle dessin d'un data-url de l'image d'une toile causes à l'origine-propre pavillon à être mis à falsece qui signifie que vous ne serez pas en mesure d'appeler toDataURL() sur la toile et d'obtenir votre PNG dos. Alors...

3. Je suppose que pour des besoins spécifiques du Client-modifié le format SVG->Toile->format PNG-sur-server, vous devez utiliser la première étape ci-dessus pour sérialiser l' svg_xml et de passer ensuite que raw source de canvg.

Sinon, vous pourriez envisager de la sérialisation de l'SVG ci-dessus et de soumettre directement à votre serveur et de faire côté serveur SVG-à-conversion PNG.