Svg sprite не отображается в браузере
ТРЕТИЙ РЕДАКТИРОВАНИЕ: вот рабочий тестовый пример. Похоже, это как-то связано с кешированием таблицы спрайтов svg. Если я настрою управление кешем на моем сервере, чтобы не было кеширования SVG, произойдет такое поведение. Не стесняйтесь просматривать исходный код (все это в одном файле, но я не хочу включать его здесь).
ВТОРОЕ РЕДАКТИРОВАНИЕ: исправление, указанное ниже (прямое внедрение элементов в index.html вместо использования внешней таблицы спрайтов), просто перестало работать в Chrome v49 (который мой браузер бета-каналов только что обновил). v48 имеет прерывистый рендеринг, но v49 довольно последовательно не отображает ничего , о котором идет речь, следуя шаблону ; но только на большой сложной угловой странице. Скучный простой тестовый пример подойдет. Добавлена награда для всех, кто может напрямую указать мне на известную проблему или откуда она может исходить. Совершенно очевидно, что это не «файл не найден», так как это все еще периодическая ошибка, и вся страница отлично отображается в firefox и safari.
РЕДАКТИРОВАТЬ: это определенно связано со ссылкой на внешний ресурс. Когда я встраиваю SVG непосредственно в index.html и ссылаюсь на них с помощью , они работают нормально, но если я ссылаюсь на внешний файл в элементе , они загружаются только иногда.
У меня странное поведение в Chrome (только - этого не происходит в Opera, Firefox, Safari); Я наблюдаю его по крайней мере с начала 40-х годов, по версии.
Мое поведение находится в центре повторяющейся угловой структуры. Все то же самое - есть куча гибких блоков div, собранных вместе. Также есть элемент SVG, который выглядит так:
Дело в том, что для некоторых из этих повторяющихся элементов значок не отображается. Проверка элемента в инструментах chrome dev показывает, что визуализированный элемент SVG имеет высоту и ширину, а необработанный элемент имеет нулевую высоту и ширину.
Не похоже, что здесь есть какая-то реальная разница; Я даже вручную отредактировал DOM, чтобы одна из некорректных записей полностью соответствовала одной из визуализированных, но svg по-прежнему не отображается. Вот соответствующий скриншот.
Вы можете видеть ниже (и игнорировать мои проблемы с заполнением с помощью кнопки), что в первой строке нет маленьких головок и значков пузырей со словами. Это временная проблема - если я перезагружу страницу, все будет в порядке, или, возможно, ни один из значков не загрузится.
Если это действительно неизвестное / новое поведение, я буду работать над созданием тестового примера, но создать что-то, что, вероятно, полагается на какую-то ошибку параллелизма, довольно сложно. Так что я решил сначала поспрашивать.
РЕДАКТИРОВАТЬ, чтобы добавить: такого поведения не происходит, если я экспортирую отдельный svg как автономный и использую его как . Он все равно не работает, если я использую svg для значка в одном автономном файле.
РЕДАКТИРОВАТЬ: по запросу @ kaiido, вот соответствующий svg, о котором идет речь.
Но не отображается в Хроме. Вы с таким сталкивались? 2 дня на это убил.
Код SVG спрайта:
Update 08.02.2019 г.
У меня получилось заставить Хром работать если использовать "g" вместо "symbol", а затем используя "view". Пока крайне мере так он их уже отоброжает в Chrome и в Firefox. Т.е вот так:
Но у меня однозначно проблемы с viewBox. Потому что иконки начинают появляться в разных местах на сайте и друг на друге (если спрайт открыть в отдельной вкладке). У всех иконок viewBox разный. Я не понимаю какой viewBox нужно давать самому спрайту, какие иконкам? И нужно ли добавлять width="" и height=""? Подскажите, пожалуйста.
Мне кажеться я попробовал все варианты. У меня не получаеться, они все лежат как хотят в спрайте, а насколько я понимаю они должны все отдельно друг от друга быть.
3 ответа 3
Если иконки SVG расположены на localhost , то есть на вашем ПК, то они не будут отображаться в Chrome . Увы..
Настраиваете своё приложение в FF , а потом уже загрузите на сервер и у вас заработает и в Chrome
Добавление иконок в HTML с помощью
Александр, я находил такое решение проблемы на английском стаке. Я переносил все на продакшн, но увы иконки не появляются, они замечательно работают через "use xlink:href=.." но через background-image или просто background в CSS в хроме не в какую. В фф все отлично. Через base6 Сейчас еще раз попробовал, подумал, может про кэш забил. Но нет. Ctrl+f5 тоже не помогло. Через base64 в CSS работают, но у меня большой готовый спрайт чтобы сейчас заниматься переделкой всех иконок в base64 (плюс захламлять css не хочеться) а background-image в хроме не работает :(
@SoreThursday ну а почему обязательно добавлять иконки, посредством background, это самый плохой способ, который пошел от css-tricks Ведь есть же другие способы добавления.
The text was updated successfully, but these errors were encountered:
akhalizev commented Feb 25, 2016
Да, лежит, его не трогал.
felixexter commented Feb 25, 2016
Если хостишь на гитхабе, то пути до всех ресурсов должны быть относительно страницы, а не от корня.
akhalizev commented Feb 25, 2016
Не понял. Вот у меня index.html. В этой же директории папка assets/images. В ней все svg. Запускаю index.html - путь же вроде правильный?
felixexter commented Feb 25, 2016
Конкретно для иконки путь укажи не от корня /assets/images/icon.svg , а локальный assets/images/icon.svg без слэша в начале.
Аналогично и с остальными ресурсами.
jt3k commented Feb 25, 2016
@akhalizev открой /assets/images/icon.svg в браузере. Не ругается на ошибками-xml ?
akhalizev commented Feb 25, 2016
Слэш убрал, заработало везде, кроме хрома.
dzhiriki commented Feb 25, 2016
Если открывать файл локально (через file://), то свг в хроме не подгружается. Это не баг шаблона, а особенность хрома.
Но проверять страницы локально и не стоит, это плохое решение по многим причинам.
AdreeUA commented Feb 28, 2016
Решил чтобы не создавать новый пост, сюда написать.
У меня почему-то не работает svg спрайт, в папке icons есть иконки(рабочие, проверял), но вот уже в dist не работает, в браузере открывается и ничего. куда смотреть, что делать?
iamstarkov commented Feb 28, 2016
@AdreeUA вкладку Network в DevTools, посмотреть куда уходит реквест
sneizdecker commented Feb 28, 2016
AdreeUA commented Feb 28, 2016
@iamstarkov можешь подробней объяснить что я должен увидеть там, на что обратить внимание?
@sneizdecker Почему-то этот сервис не распознает мои иконки. На компьютере открываются во всех браузерах
iamstarkov commented Feb 28, 2016
@AdreeUA посмотреть загружаются ли они вообще в браузере
AdreeUA commented Feb 28, 2016
@iamstarkov Сам файл загружается, просто если открыть этот спрайт то он получается битый, ну или еще что-то. Если открыть его в текстовой редакторе, то вроде все нормально .
Не могу понять, как подключить, чтобы нормально работало.
Делаю все по статье из этого сайта и прекрасно все работало, до того момента, как подключил внешним файлом. Иконка не отображается на странице, хотя когда подключал этот же код спрайта на странице, то все работало.
На html странице код такой:
Во внешнем файле test.svg код:
Ответы (3 шт):
Лучше прямо в HTML встраивать, чтобы не плодить лишних запросов к внешнему SVG файлу. Однако, если вставлять inline способом, то кешироваться не будет. На одной конференции Яндекса советовали вставлять через JS, чтобы они кешировались. Сейчас опишу, как я делаю. 1) Создаем JS файл с inline SVG. К примеру, такой // Тут хранятся иконки в SVG
// Вставляем иконки в HTML
2) Создаем в HTML пустой div с id svg-icon-placeholder . В него мы и будем вставлять SVG 3) Юзаем через use :) Довольно просто, но я пока не придумал как автоматизировать сборку спрайтов через GULP таким способом. Если знаете, то подскажите как)
Иконка не отображается на странице, хотя когда подключал этот же код спрайта на странице, то все работало.
Действительно, непосредственное встраивание svg (инлайн) в HTML является самым простым и надежным способом, НО
Код странички получается очень большим, поэтому более предпочтительно подключать SVG внешним файлом.
Инструкция, на которую вы ссылались хорошая, но автор не раскрыл достаточно полно, как подключать внешний файл SVG.
Сначала нужно обязательно добавить спрайт в HTML с помощью тега
Вот здесь подробно разбиралась тема добавления иконок из спрайта.
Далее вызываете иконки по ID
С производительностью тоже не будет проблем, потому-что спрайт загружается только один раз, а иконки можно многократно вызывать из него в любом месте HTML странички.
Столкнулся с похожей проблемой в браузере Chrome.
В итоге оказалось, что все работает (и без ), если svg-файл грузится с сервера, а не локально.
Столкнулся проблемой отображения svg спрайтов в ie11.
Есть два варианта:
В 1ом варианте svg экспортировал через плагин generate в photoshop 2015. Hаботает во всех браузерах, но не реагирует на css, даже если почистить все атрибуты у svg.
Во 2ом сложнее сохранял как .ai и конвертировал в svg. Не работает только в ie11 (версии ниже не проверял), но реагирует на css, причем не отображаются только некоторые иконки.
Спрайт прикрепляю сразу после открывающего тэга body и скрываю его. Обращаюсь к спрайту через, например:
Ссылка на комментарий
3 ответа на этот вопрос
Похожие публикации
Здравствуйте, пытаюсь сделать небольшой редактор. Сначала нажимается кнопка на html-странице, потом заполняется форма с параметрами графоэлемента (иконы), эти параметры считывает скрипт, передаёт их в другую функцию. Та формирует код HTML с тегом svg и вставляет в блок draw. В этом деле вообще начинающий, ещё в голове путаница с расположением элементов, паддингами и т.п. А проблема, что после исполнения скрипта ничего не происходит, иногда на секунду мелькает что-то похожее, но в целом результата нет.
JS:
function openForm() document.getElementById("IconForm").style.display = "block";
>
function closeForm() document.getElementById("IconForm").style.display = "none";
return false;
>
function drawIcon(bc, bg, fc, text) var svg = ' ";
alert(svg);
document.getElementById('Dragon').innerHTML += svg;
return true;
>
function acceptArgs() <
var bc = document.getElementById("select_bc");
bc = bc.options[bc.selectedIndex].value;
var bg = document.getElementById("select_bg");
bg = bg.options[bg.selectedIndex].value;
var fc = document.getElementById("select_fc");
fc = fc.options[fc.selectedIndex].value;
var text = document.getElementById("text_in").value;
closeForm();
drawIcon(bc, bg, fc, text);
у svg должно быть три состояния обычное, при наведении, при нажатии
думаю как это сделать
Vне бы хотелось его вставить в html разметку, а не просто с помощью bsckground-position. Т.к. я хочу анимации при наведении (transition).
И я могу менять цвет обводки с помощью css-свойства fill.
Но есть еще одно состояние когда картинка полностью закрашена. Как сделать чтобы то же свг закрашивалось полностью (например при добавлении класса)?
У меня не получается просто добавить css свойство для этого
Какие есть еще идеи?
Как видно, не вся svg поместилась на страницу. А хотелось бы получить результат как на второй картинке, т.е. уместить всю svg в область под Untitled так, чтобы вниз страница не прокручивалась.
Привет. Подскажите пожалуйста, что нужно настроить в конфиге apache24, чтобы локальная страничка могла обрабатывать данные с любого места жесткого диска. Сейчас проблема в том, что я пытаюсь на страничке вызвать изображение (указываю полный путь), которое расположено, например, на флешке, но всегда выводит белый фон.
Читайте также: