Zugriff auf die SVG-Daten per JavaScript

Wenn ein web-browser lädt eine SVG-Datei es (grob) analysiert den Datenstrom und erstellt ein DOM-Struktur im Speicher der SVG-Datei. Es ist dieses in-memory-Repräsentation, die geändert wird, wenn das Skript erstellt dynamisch und fügt neue Elemente in das Dokument.

Können Sie sehen, ein sehr einfaches Beispiel dieses hier:

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

Die SVG-Datei wird geladen und mit einem Kreis im hintergrund für das Gesicht, und dann JavaScript dynamisch erstellt die Augen und die Nase und fügt diese als Kinder des SVG-element.

Gibt es drei Möglichkeiten, die ich kenne, dass Sie auf diese Informationen zugreifen kann und ihn in eine Leinwand:

1. Können Sie zu Fuß den DOM von Elementen selbst, und Problem canvas-Kontext zeichnen-Befehle:

   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;
       //...
     }
   }

   Sehen die SVG-DOM-Referenz für weitere Informationen über die Eigenschaften und Methoden zur Verfügung, oder benutzen Sie einfach das DOM 2 Core Methoden zum abrufen von Eigenschaften. Für Einfachheit, möchten Sie vielleicht die Verwendung der letzteren.

   Zum Beispiel, können Sie entweder den aktuellen (nicht-SMIL animiert) cx der Kreis, der das SVG-DOM über var cx = kid.cx.baseVal.value; oder Sie können einfach tun var cx = kid.getAttribute('cx');.

   Dies ist einfach, wo die SVG-und Canvas-ähnliche Befehle (z.B. rect oder line), ein wenig zu arbeiten, wo Sie nicht exakt übereinstimmen (z.B. circle versus arcTo, polyline als eine Reihe von lineTo Befehle), und eine Menge Arbeit für die path element und seine viele Zeichenbefehle.

2. Pro diese Antwort und dieses Papier, verwenden Sie die XMLSerializer - Schnittstelle verwenden, um die SVG zurück als markup verwenden, die direkt als Quelle eines img, und dann drawImage dass auf die Leinwand. Mit meinem obigen Beispiel:

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

   Wenn Sie SVG in XHTML (wie in meinem Beispiel), die Serialisierung nicht zu erfassen Stile definiert, die außerhalb des SVG-block (wie in meinem Beispiel), und so werden Sie nicht angewendet werden in der Bild.

   Beachten Sie, dass pro diese Frage/Antwort (von mir), müssen Sie die onload Attribut vor legen Sie die src um die Daten-URL, wenn Sie möchten, IE9 Kompatibilität.

   Leider, wegen dem, was sein kann oder nicht ein bug, Zeichnung, eine Daten-url-Bild auf eine Leinwand, bewirkt, dass die origin-clean flag gesetzt werden, um false, was bedeutet, dass Sie nicht in der Lage zu nennen toDataURL() auf der Leinwand und Holen Sie sich Ihre PNG-zurück. So...

3. Ich nehme an, für Ihre spezifischen Bedürfnisse Client-modifizierte SVG->Canvas->PNG-on-server Sie müssen den ersten Schritt vor dem serialisieren die svg_xml - und dann passieren, dass der raw-Quelle zu canvg.

Alternativ könnten Sie die Serialisierung der SVG-pro der über-und Abgabe, die direkt auf dem server und tut serverseitige SVG-to-PNG-Konvertierung.

InformationsquelleAutor Phrogz