Показать SVG, сохраненный как URI данных, используя background-image: Почему значение свойства недопустимо? - PullRequest
Новая
       3

Показать SVG, сохраненный как URI данных, используя background-image: Почему значение свойства недопустимо?

0 голосов
/ 31 октября 2019

Я храню файлы SVG как URI данных в MySQL. Позже я хочу снова отобразить SVG как изображения, используя свойство CSS background-image.

Вот как я создаю URI данных (после этого ответа ). 

// SVG element
let svg = document.getElementById('tree-svg');

// SVG as string
let serializer = new XMLSerializer();
let svgSource = serializer.serializeToString(svg);

// Add name spaces
if (! svgSource.match(/^<svg[^>]+xmlns = "http\:\/\/www\.w3\.org\/2000\/svg"/)) {
    svgSource = svgSource.replace(/^<svg/, '<svg xmlns="http://www.w3.org/2000/svg"');
}
if (! svgSource.match(/^<svg[^>] + "http\:\/\/www\.w3\.org\/1999\/xlink"/)) {
    svgSource = svgSource.replace(/^<svg/, '<svg xmlns:xlink="http://www.w3.org/1999/xlink"');
}

// XML declaration
svgSource = '<?xml version="1.0" standalone="no"?>\r\n' + svgSource;

// data URI
let svgUri = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svgSource);

Я храню svgUri как блоб в MySQL. Это пример строки, представляющей простой SVG: 

data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%0D%0A%3Csvg%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20id%3D%22tree-svg%22%20viewBox%3D%220%200%20700%20500%22%3E%3Cg%20transform%3D%22translate(40%2C%2040)%22%3E%3Ctext%20class%3D%22node-text%22%20y%3D%2220%22%20x%3D%2223.192203521728516%22%20id%3D%22n0%22%3Eone%3Ctspan%20class%3D%22node-subscript%22%3E1%3C%2Ftspan%3E%3C%2Ftext%3E%3Cline%20x1%3D%2223.192203521728516%22%20y1%3D%2240%22%20stroke-width%3D%222%22%20id%3D%22n0%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E

Это CSS для отображения SVG в виде изображения (это синтаксис шаблона Blade, но, как я вижу в инструментах разработчика, строка из моегобаза данных отображается корректно в скобках):

edit: после добавления комментария я добавил цитаты в приведенный ниже пример кода. Это работает сейчас. 

background-image: url("{!! $sentence['svg'] !!}")

Это еще не работает, ничего не отображается. Div, к которому я прикрепляю фоновое изображение, пуст. Если я вставлю строку из MySQL в строку URL, SVG будет отображаться правильно.

Что мне нужно изменить в моем коде JS и / или в CSS, чтобы SVG отображался как background-image?

...