Конвертировать сгенерированный JavaScript SVG в файл

Question

Я использую d3.js для визуализации некоторых данных.Я хотел бы иметь возможность взять код SVG, который он генерирует, и сохранить его как файл .svg (для редактирования в Inkscape / Illustrator).

Я попытался просто скопировать содержимое тега svgто есть

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

в файл с именем image.svg, но при этом отсутствует информация о цвете / стиле, которая содержится в двух отдельных файлах CSS.

Я работаю с этот пример .

Есть ли простой способ сделать это?

Answer 1

Я думаю SVG Crowbar может быть лучшим способом справиться с этим.

Документация

Answer 2

Вот хороший способ использования svg-crowbar.js для предоставления кнопки на вашем сайте, чтобы позволить вашим пользователям загружать вашу визуализацию как svg.

1) Определите CSS вашей кнопки:

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

2) Определите 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>

Вот более внимательный взгляд на тот же 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) Вы закончили. Это загрузит SVG, который может открыть Inkscape.

Примечание: svg-crowbar.js загружается из https://rawgit.com или http://nytimes.github.com;, вы можете интегрировать его в свой веб-сайт / папку.

Answer 3

Это поздно, но с D3.js было бы просто встроить CSS. Вы бы сделали что-то вроде:

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)) + ")";
}

Моя функция квантование - это просто быстрый взлом для демонстрации, но вы можете посмотреть на colorbrewer , чтобы выработать логику применения квантилей к цветам.

Answer 4

Это работает для меня в Chrome v16b и Safari v5.1 в Windows: http://phrogz.net/SVG/chloropleth.html

Все, что я сделал, это использовал Инструменты разработчика, чтобы скопировать как HTML-узел SVG, вставить его в пустой документ и добавить ссылки на два файла CSS. Правильно ли это отображается в Safari?

Редактировать : Это как отдельный файл SVG: http://phrogz.net/SVG/chloropleth.svg
Для этого я добавил атрибут xmlns в <svg> и внешние ссылки:

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

Снова проверено на работу в Chrome и Safari.

Answer 5

Существует расширение под названием " svg-grabber " ( Экспорт SVG - это еще один вариант ), вы можете попробовать его, оно работает, просто щелкнув по значку расширения, это результат для страница stackoverflow: