SVG in PNG konvertieren und CSS-Integrität beibehalten
Ich verwende derzeit canvg () und Canvas2Image, um meine SVG in eine Zeichenfläche zu kopieren und dann die Zeichenfläche in PNG zu konvertieren. Ich möchte das Bildformat beibehalten und nicht PDF verwenden.
Wie kann ich die CSS-Integrität aufrechterhalten? Das Diagramm wird mit NVD3.js erstellt.
%Vor% 
3 Antworten
Stildefinitionen für in Stylesheets definierte SVG-Elemente werden nicht auf die generierte Leinwand angewendet. Dies kann durch Hinzufügen von Stildefinitionen zu den Svg-Elementen vor dem Aufruf von canvg gepatcht werden.
Inspiriert auf diesem Artikel habe ich Folgendes erstellt:
%Vor%Der Schlüssel hier ist, dass alle Stilregeln Teil des SVG sein müssen, nicht in externen Stildateien. Sie müssten also das gesamte CSS für NVD3 durchgehen und alle diese Attribute im Code festlegen. Alles, was über ein externes Stylesheet gesetzt wird, wird ignoriert.
nur um @Lars Kotthoffs Antwort konkreter zu machen. " Beispiel, wie man ein PNG direkt von einem Svg exportiert " hat ein funktionierendes Beispiel. Das Code-Snippet / Gist versucht, zuerst alle css auf die svg inline anzuwenden und dann das Bild auf die Leinwand zu zeichnen und die Daten als PNG zu exportieren. (intern wurde svg-crowbar -Code angenommen). und ich wende die Technik in meinem Projekt an und es funktioniert reibungslos - eine Download-Schaltfläche, die das SVG-Bild herunterladen kann, das mit nvd3 gerendert wurde.