Как установить IMG src с данными SVG + XML?
У меня есть функция, которая возвращает файл SVG, который ранее был сгенерирован jSignature и сохранен в файл. Мой скрипт получает фактическое содержимое файла через вызов ajax вместе с другими данными о подписи в большом объекте JSON.
Это автономный проект, поэтому я пытаюсь сохранить данные SVG в локальном хранилище для рендеринга в автономном режиме. Вот почему я не могу просто ссылаться на файлы SVG на сервере.
Я хочу назначить данные изображения SVG элементу IMG, чтобы пользователь мог видеть его в браузере. Как я могу установить эти данные SVG непосредственно в тег IMG без необходимости сначала записывать их в файл?
Если я попытаюсь установить свойство src, изображение покажет недопустимый значок изображения. Я также добавил текст «data: image / svg + xml» перед фактическими данными SVG, но без изменений.
Вот пример:
// This would be read from localStorage:
var image_data = '<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?><!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\"><svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" width=\"1000\" height=\"151\"><path />...snipped...</svg>';
// Show the SVG image:
$("#image1").attr('src', 'data:image/svg+xml,' + image_data);
Однако это не работает. Что я делаю неправильно?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я почти уверен, что вы можете встроить svg в такой src, только если svg закодирован в base64.
Вам, вероятно, будет лучше использовать элемент <svg id = "image1"></svg> и использовать jQuery .replaceWith(..) для его замены, не так ли? (вам не понадобится мусор xml / doctype).
Пример: JFiddle
HTML
<svg id = "image1"></svg>
Javascript
var imageData = '<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?><!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\"><svg height = "100" width = "100"><circle cx = "50" cy = "50" r = "40" stroke = "black" stroke-width = "3" fill = "red" /></svg>';
$('#image1').replaceWith( $('<div/>').append(imageData).find('svg:first').attr('id','image1') );
Как мне удалить объявление doctype и т. д. В начале этих данных SVG? Эти данные возвращаются из плагина jSignature, поэтому я не могу изменить их сейчас.
вам нужно будет закодировать URL-адрес image_data. Если он содержит # символов, их нужно будет заменить, например, на% 23, поскольку # является зарезервированным символом в URL-адресах. Вам также не нужны обратные косые черты, если вы не собираетесь кодировать строку в "вместо"