Позвольте пользователям загружать манипуляции SVG - PullRequest
Новая
       10

Позвольте пользователям загружать манипуляции SVG

0 голосов
/ 24 ноября 2018

В настоящее время я работаю над веб-страницей, на которой пользователи смогут манипулировать SVG-файлом карты мира по своему вкусу.Например, пользователи могут выбрать все европейские страны, выделить определенные и загрузить полученный файл.

Я понимаю, что вы можете включить ссылки для скачивания следующим образом: 

<a href="/path/to/file.svg" download>

Теперь, когда я нигде не сохранил измененный SVG, как я могу позволить пользователям загружать их модифицированную версиюSVG?

Я храню SVG, так что я могу напрямую манипулировать его атрибутами из файла javascript.

Я посмотрел в cropper.js, но он работает только с объектами canvas и img.

1 Ответ

0 голосов
/ 28 марта 2019

Поскольку вы пометили этот вопрос с помощью jquery, я предполагаю, что вы также используете его.Тогда есть довольно простой способ загрузки встроенного svg (измененный или нет) в виде файла .svg.

Вот некоторые встроенные SVG (опять же, измененный или нет), которые вы можете загрузить, нажав на ссылку. 

$(document).ready(function() {
   $('#download').attr('href', 'data:application/octet-stream;base64,' + btoa($("#circle").html())); 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<a id="download" download="file-name-here.svg">Download</a>

<div id="circle"><svg width="100" height="100" id="visualization" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg></div>
...