Svg sprite не отображается в браузере
Обновлено: 04.07.2024
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 Сам файл загружается, просто если открыть этот спрайт то он получается битый, ну или еще что-то. Если открыть его в текстовой редакторе, то вроде все нормально .
Внутри моего веб-сайта я вставляю несколько svg. Все они работают отлично в Chrome, Firefox, IE (9+) и в Safari. Howvere, как только изображение, включенное в svg, сафари не отображает изображение.
В соответствии с предыдущей аналогичной темой я пробовал следующее:
Изображение SVG не отображается в Safari - Я не считаю это очень полезным, потому что это удаляет aprt svg.
<meta http-equiv="Content-Type" content="application/xhtml+xml"> в заголовке.
И кроме того, я действительно не знаю, что еще попробовать. Возможно, еще одна интересная вещь: внутри моей страницы изображение не отображается, но я могу открыть svg файл в сафари (только файл), и он будет правильно отображаться. Более того, после того, как он открывается в браузере в виде файла, он также отображается внутри страницы. И я вставляю svg на страницу с тегом img.
У меня есть уменьшенная строка изображения base64, чтобы сократить код. Полный svg можно найти здесь.
UPDATE: просто чтобы быть ясным, svg показывает в браузере (сафари), но изображение отсутствует (я вижу только границу).
ОТВЕТЫ
Ответ 1
Обходной путь, который мы используем в нашем приложении, состоит в том, чтобы иметь script, который находит все элементы img , отображающие изображения SVG, и добавляет скрытые элементы object , загружая одни и те же SVG ( <object style="position: fixed; width: 0; height: 0;" data="image.svg" type="image/svg+xml"></object> ).
Причина, по которой он работает, заключается в том, что тег object правильно загружает внедренные изображения в кеш изображения, так что они видны внутри SVG, загружаемых с помощью тегов img .
Преимущество такого подхода заключается в том, что изображения все еще отображаются с использованием тега img , так что обходной путь может быть применен (а затем удален удаленно, когда браузеры в конечном итоге исправлены), не затрагивая остальную часть приложения/веб-сайта.
Недостатком является создание дополнительного тега object для каждого изображения SVG.
Ответ 2
Это решение работает для меня при отображении встроенного SVG-изображения в Safari.
<object data="image.svg" type="image/svg+xml"></object>
Ответ 3
Кажется, что ответ на этот вопрос работает: Что может сделать Safari пропустить клип-путь и маску с SVG?. См. Инструкции по ссылке из ответа.
Вам нужно воссоздать свой клип, чтобы сделать его видимым. А тег </clippath> не помещается после тега </image> .
Вот маленький измененный код (ссылка на мое изображение вставлена, поэтому вам придется его изменить):
Ответ 4
Так отметил Анто Юркович, есть некоторые известные проблемы с Safari и clipPath. То, что нравится Safari, - это если вы не определяете многоугольник, но вставьте его прямо в clippPath. Также вы должны отдельно группировать clipPath.
Но я все еще не мог получить svg для рендеринга изображения, если я использовал тег img для svg - <img src="https://utyatnishna.ru/info/544446/svg"/> . Поэтому в конце я вложил его так:
Я могу подтвердить, что это правильно отображается в мобильном сафари (на ipad и iphone, сафари для windows и сафари Mac - последние версии).
Итак, чтобы подвести итог. У меня есть этот svgs в отдельном html файле и рендеринг их при необходимости.
Ответ 5
Я столкнулся с этой проблемой, когда я использовал Ajax для загрузки svg spritesheet на страницу. Если бы у меня была страница на странице до того, как был загружен спрайт, она потерпит неудачу и не будет разрешаться после того, как спрайт будет доступен. Любое добавление в дом после загрузки спрайта было прекрасным. Мне пришлось откладывать предметы в доме до тех пор, пока после того, как спрайт закончил загрузку.
Это повлияло только на IOS. Все остальные браузеры не заботились о заказе.
Я пытаюсь добавить значок SVG в элемент заголовка h1:
Обновить
При тестировании в JSFiddle я получаю следующую ошибку:
Но в исходном URL-адресе такой проблемы нет, но значок по-прежнему не отображается.
Проблема в вашем родительском div: cta . Вы скрываете все внутри с помощью следующего CSS:
А затем переопределите стиль дочерних элементов cta , используя следующее:
Проблема в последней строке. Для shopping-cart svg внутри спрайта установлено значение display:none , поэтому вам просто нужно настроить таргетинг на него и всех его дочерних элементов, чтобы отобразить его.
Обновите ваш CSS до этого:
Теперь SVG виден, а ваши CTA-элементы по-прежнему скрыты:
Похоже, что правило стиля добавляет display: none; к элементу <use> .
Когда я отключаю это правило стиля, появляется SVG.
Кажется, какой-то CSS устанавливает display:none для значка на вашем веб-сайте. И в jsfiddle это не отображается, потому что это Замените свой код svg на это на своем веб-сайте. Это отлично работает: D.
Дело не в том, что <img> или <h1> не отображают svg. Это ваш svg на самом деле ничего не рисует.
В <svg> он определяет множество <symbol> . Они похожи на библиотеку ваших шаблонов. Вы определяете множество шаблонов в своей библиотеке, но никогда не выносите их на холст, чтобы показать их. Если открыть svg в браузере, ничего не отображается. Не потому, что display:none работает, но ему на самом деле нечего показать.
Читайте также: