Преобразование созданного JavaScript SVG в файл

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

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

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

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

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

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

ОТВЕТЫ

Ответ 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; вы можете предпочесть интегрировать его в свой веб-сайт/папку.

Ответ 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, чтобы выработать логику применения квантилей к цвета.

Ответ 4

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

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

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

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

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