Convertir Le SVG généré par JavaScript en un fichier

Question

Je suis à l'aide de d3.js pour visualiser certaines données. Je voudrais être en mesure de prendre le code SVG qu'il génère et de le stocker en tant que .svg le fichier image (pour le montage dans Inkscape/Illustrator).

J'ai tout simplement essayé de copier le contenu de la balise svg c'est à dire

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

dans un fichier image.svg, mais là n'est pas sur la couleur/informations sur le style, qui est séparée en deux fichiers CSS.

Je travaille avec cet exemple.

Est-il un moyen simple de faire cela?

Answer 1

Je pense que SVG Crowbar peut être la meilleure façon de faire face à cela.

Documentation

Answer 2

Voici une belle façon de les utiliser svg-crowbar.js fournir un bouton sur votre site pour permettre à vos utilisateurs de télécharger votre visualisation svg.

1) Définir votre bouton CSS:

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

2) Définir votre bouton HTML/JS:

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

Voici un peu plus près à la même 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) Vous avez terminé. Cela produit un svg téléchargement Inkscape peut ouvrir.

Remarque: svg-crowbar.js est chargé à partir de https://rawgit.com ou http://nytimes.github.com; vous préférez peut-être l'intégrer dans votre site/dossier.

Answer 3

C'est tard, mais la largeur D3 il serait simple d'inaligner le css. Vous feriez quelque chose comme ...

Ma fonction quantize est juste un hack rapide pour la démonstration, mais vous pourriez regarder colorbrewer travailler sur la logique pour l'application de quantiles à color.s

Answer 4

Cela fonctionne pour moi en Chrome v16b et Safari v5.1 sous Windows: http://phrogz.net/SVG/chloropleth.html

J'ai tout utiliser les Outils de développement pour Copier comme HTML, SVG nœud, de la coller dans un document vierge, et ajouter les liens vers les deux fichiers CSS. Est-ce à apparaître correctement pour vous dans Safari?

Edit: Ici, il est autonome, SVG fichier: http://phrogz.net/SVG/chloropleth.svg
Pour cela, j'ai ajouté l' xmlns d'attribut à l' <svg> et les liens externes:

<?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>

Encore une fois, vérifié pour travailler dans Chrome et Safari.