it-swarm.com.de

Konvertieren Sie mit JavaScript generierte SVG-Dateien in eine Datei

Ich verwende d3.js, um einige Daten zu visualisieren. Ich möchte in der Lage sein, den erzeugten SVG-Code als .svg-Bilddatei zu speichern (zur Bearbeitung in Inkscape/Illustrator).

Ich habe versucht, einfach den Inhalt des svg-Tags zu kopieren, d. H. 

<svg>
<!--snip-->
</svg>

in eine Datei namens image.svg, aber dadurch werden die Farb-/Styling-Informationen übersehen, die sich in zwei separaten CSS-Dateien befinden.

Ich arbeite mit diesem Beispiel .

Gibt es eine einfache Möglichkeit, dies zu tun?

37
Jason Sundram

Ich denke, SVG Crowbar kann der beste Weg sein, um damit umzugehen.

Dokumentation

29
Jason Sundram

Hier ist eine nette Möglichkeit, mit svg-crowbar.js eine Schaltfläche auf Ihrer Website bereitzustellen, über die Ihre Benutzer Ihre Visualisierung als svg herunterladen können.

1) Definiere das CSS deines Buttons:

.download { 
  background: #333; 
  color: #FFF; 
  font-weight: 900; 
  border: 2px solid #B10000; 
  padding: 4px; 
  margin:4px;
}

2) Definiere HTML/JS deines Buttons:

<i class="download" href="javascript:(function () { var e = document.createElement('script'); if (window.location.protocol === 'https:') { e.setAttribute('src', 'https://rawgit.com/NYTimes/svg-crowbar/gh-pages/svg-crowbar.js'); } else { e.setAttribute('src', 'http://nytimes.github.com/svg-crowbar/svg-crowbar.js'); } e.setAttribute('class', 'svg-crowbar'); document.body.appendChild(e); })();"><!--⤋--><big>⇩</big> Download</i>

Hier ist ein genauerer Blick auf das gleiche Javascript:

javascript:(function (){ 
    var e = document.createElement('script'); 
    if (window.location.protocol === 'https:') { 
        e.setAttribute('src', 'https://rawgit.com/NYTimes/svg-crowbar/gh-pages/svg-crowbar.js'); 
    } else { 
        e.setAttribute('src', 'http://nytimes.github.com/svg-crowbar/svg-crowbar.js'); 
    } 
    e.setAttribute('class', 'svg-crowbar'); 
    document.body.appendChild(e); 
})();

3) Du bist fertig. Dies erzeugt einen svg-Download, den Inkscape öffnen kann.

Hinweis: svg-crowbar.js wird von https://rawgit.com oder http://nytimes.github.com geladen; Vielleicht möchten Sie es in Ihre Website/Ihren Ordner integrieren.

10
Hugolpz

Dies ist spät, aber mit D3.js wäre es einfach, das CSS zu integrieren. Sie würden so etwas tun:

d3.json("../data/us-counties.json", function(json) {
  counties.selectAll("path")
      .data(json.features)
    .enter().append("path")
      .attr("fill", data ? quantize : null)
      .attr("d", path);
});

d3.json("unemployment.json", function(json) {
  data = json;
  counties.selectAll("path")
      .attr("fill", quantize);
});

function quantize(d) {
  return "hsla(120, 50%, 50%, " + Math.min(8, ~~(data[d.id] * 9 / 12)) + ")";
}

Meine Funktion quantize ist nur ein kurzer Hack zur Demonstration, aber Sie könnten sich mit colorbrewer die Logik für das Anwenden von Quantilen auf Farben erarbeiten.

5
Duopixel

Dies funktioniert für mich in Chrome v16b und Safari v5.1 unter Windows: http://phrogz.net/SVG/chloropleth.html

Alles, was ich tat, war, die Entwicklertools zu verwenden, um den SVG-Knoten als HTML-Code zu kopieren, in ein leeres Dokument einzufügen und die Links zu den beiden CSS-Dateien hinzuzufügen. Erscheint das in Safari für Sie richtig?

Bearbeiten : Hier handelt es sich um eine eigenständige SVG-Datei: http://phrogz.net/SVG/chloropleth.svg
Hierfür habe ich das xmlns-Attribut zum <svg> und den externen Links hinzugefügt:

<?xml-stylesheet href="http://mbostock.github.com/d3/ex/choropleth.css" type="text/css"?>
<?xml-stylesheet href="http://mbostock.github.com/d3/ex/colorbrewer.css" type="text/css"?>
<svg xmlns="http://www.w3.org/2000/svg"><!-- 1MB of data --></svg>

Wiederum verifiziert, dass es in Chrome und Safari funktioniert.

3
Phrogz

Es gibt eine Erweiterung mit dem Namen " svg-grabber " ( svg-Export ist eine weitere Option ). Sie können es versuchen. Es funktioniert einfach durch Klicken auf das Erweiterungssymbol. Dies ist das Ergebnis der stackoverflow-Seite:  enter image description here

0
Luis Limas