Сохранить сгенерированный SVG с SVG. js как .SVG файл - PullRequest
Новая
       35

Сохранить сгенерированный SVG с SVG. js как .SVG файл

0 голосов
/ 30 марта 2020

Я пытаюсь сохранить элементы, которые я создаю с помощью svg. js, как файл .svg автоматически после их создания. В библиотеке есть метод svg () для экспорта SVG, но я не нашел примеров, чтобы узнать, как его использовать. Например, если я хочу сохранить прямоугольник, созданный в приведенном ниже коде, как я могу это сделать?

html: 

<!DOCTYPE html>
<html>
<head>
  <title>SVG.js</title>
  <script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js"></script>
</head>
<body>

</body>
</html>

js: 

var draw = SVG().addTo('body').size(300, 300);
var rect = draw.rect(100, 100).attr({ fill: '#f06' });

1 Ответ

1 голос
/ 02 апреля 2020

На http://svgjs.com есть панель поиска, где вы можете просто найти export, и вы найдете то, что ищете :

Экспортировать полностью сгенерированный SVG или его часть можно с помощью метода svg (): 

draw.svg()

Экспорт работ по отдельным элементам: 

var rect = draw.rect()
var svg  = rect.svg()

Теперь вы сгенерировали строку, содержащую ваш svg. Чтобы загрузить эту строку в виде файла (создание файла), быстрый поиск в Google дает вам хорошее решение : 

function downloadString(text, fileType, fileName) {
  var blob = new Blob([text], { type: fileType });

  var a = document.createElement('a');
  a.download = fileName;
  a.href = URL.createObjectURL(blob);
  a.dataset.downloadurl = [fileType, a.download, a.href].join(':');
  a.style.display = "none";
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  setTimeout(function() { URL.revokeObjectURL(a.href); }, 1500);
}

// downloadString("a,b,c\n1,2,3", "text/csv", "myCSV.csv")
...