Очень долго искал способ вставить SVG-спрайт
из отдельного файла в HTML
код, чтобы при этом он оставался чистым, а спрайты вызывались по ID из этого спрайта.
Нашёл боле менее рабочий способ, но он добавляет этот спрайт в память браузера (из-за чего он работает только на серверах), а уже потом использует его.
(function(window, document) {
'use strict';
var file = 'img/svg_sprite.svg',
revision = 1;
if (!document.createElementNS || !document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGRect) return true;
var isLocalStorage = 'localStorage' in window && window['localStorage'] !== null,
request,
data,
insertIT = function() {
document.body.insertAdjacentHTML('afterbegin', data);
},
insert = function() {
if (document.body) insertIT();
else document.addEventListener('DOMContentLoaded', insertIT);
};
if (isLocalStorage && localStorage.getItem('inlineSVGrev') == revision) {
data = localStorage.getItem('inlineSVGdata');
if (data) {
insert();
return true;
}
}
try {
request = new XMLHttpRequest();
request.open('GET', file, true);
request.onload = function() {
if (request.status >= 200 && request.status < 400) {
data = request.responseText;
insert();
if (isLocalStorage) {
localStorage.setItem('inlineSVGdata', data);
localStorage.setItem('inlineSVGrev', revision);
}
}
}
request.send();
} catch (e) {}
}(window, document));
В данный момент я не на столько продвинут, чтобы читать такой код, но проблема вот в чём: после того, как я меняю свой спрайт, он не перезаписывается в памяти браузера, а очистка кэша тоже не помогает, приходится вручную удалять его из памяти, что очень неудобно.
Можно ли сюда куда-нибудь как-нибудь вписать код проверки хотя бы размера файла (лучше, конечно, хеш-суммы), при котором он бы заменял старый файл?
Может попробовать использовать проверенный и надёжный способ добавления SVG-спрайта из отдельного файла в HTML с помощью <object>
.
Тем более здесь есть целый раздел ответов и вопросов, как это сделать. Тег svg-спрайт
<object type="image/svg+xml" data="sprite.svg" >
Your browser does not support SVG
</object>
<div class="container">
<svg class="icon-box" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<use xlink:href="images/sprite.svg#user"></use>
</svg>
</div>
<div class="container">
<svg class="icon-box" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<use xlink:href="images/sprite.svg#home"></use>
</svg>
</div>
где #user
, #home
уникальные идентификаторы иконок внутри svg спрайта
Тег <object>
добавления файла спрайта в HTML необходимо разместить в листинге выше вызовов иконок, лучше в хедере. Это понятно, иконки должны загрузиться до вызова их в конкретном месте странички.
В шапке файла спрайта необходимо добавить путь до внешней таблицы стилей:
<?xml-stylesheet type="text/css" href="Svgstyle.css"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
Код спрайта
</svg>
sprite.svg
<?xml-stylesheet type="text/css" href="Svgstyle.css"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
<symbol id="user" viewBox="0 0 24 24">
<path код иконки ..... />
</symbol>
<symbol id="home" viewBox="0 0 24 24">
<path код иконки ..... />
</symbol>
<symbol id="settings" viewBox="0 0 24 24">
<path код иконки ..... />
</symbol>
</svg>
Виртуальный выделенный сервер (VDS) становится отличным выбором
Нужно реализовать расположение двух элементов как на скриншоте при этом желательно чтобы они были в одном rowЛоготип всегда должен быть по центру,...
Добрый деньПишу веб приложение и ищу способ собрать ui(html css) без написания кода
Верстаю используяcol-lg-* Все разрешения, что меньше 1200 начинают делать какие-то непонятно-магические действия (появляется белое окно)