Изображение SVG не отображается в Chrome
Я работал над этим проектом пару месяцев назад, и он работал нормально. Я открываю его сегодня, и изображения SVG не отображаются на Chrome. Однако он отображается в других браузерах. Вот как я их использую.
У вашего SVG нет заявленных width , height или viewBox ?
Ответы 3
Ваш код выглядит нормально. Хотя вы можете сократить <use> с помощью самозакрывающегося тега:
Может быть, ваше изображение было перемещено / удалено / переименовано, а другие браузеры просто кэшируют его?
Вы указываете, что оно отображается в одном браузере, но не отображается в другом, так что это означает, что изображение находится там, где оно должно быть. Есть ли вероятность того, что какой-либо CSS влияет на «icon-user»?
Какой браузер работает, а какой нет? Более подробная информация может помочь вам найти ответ.
У меня была аналогичная проблема, и она была вызвана символом id , дублированным в sprite.svg .
Воспроизводилось только тогда, когда хром загружал файл SVG из кеша диска. Подробнее в связанный PR
Убедитесь, что у вас нет повторяющихся идентификаторов, даже если это не icon-user .
SVG-файлы в Internet Explorer 11 отображаются неправильно
Примечание: Поддержка классических приложений Internet Explorer 11 будет отменена 15 июня 2022 г. (список области действия см. в вопросе и о том, как это сделать). Те же приложения и сайты IE11, которые вы используете сегодня, могут открываться Microsoft Edge режиме Internet Explorer. Подробнее об этом.
Проблемы
При просмотре веб-страницы, которая содержит SVG-файл в Internet Explorer 11, он отображается неправильно.
Причина
Эта проблема возникает, потому что привязка пикселей неправильно применяется к некоторым элементам SVG.
Решение
Сведения об обновлении
Чтобы устранить эту проблему, установите последнее накопительное обновление системы безопасности для Internet Explorer. Для этого перейдите в Microsoft Update.
Технические сведения о последних накопительных обновлениях системы безопасности для Internet Explorer можно найти на следующем веб-сайте Майкрософт:
http://www.microsoft.com/technet/security/current.aspxПримечание. Это обновление впервые было включено в обновление для системы безопасности 2909921.
Чтобы получить дополнительные сведения об обновлении для системы безопасности 2909921, щелкните номер следующей статьи, чтобы просмотреть статью в базе знаний Майкрософт:
2909921 MS14–010: накопительное обновление системы безопасности для Internet Explorer: 11 февраля 2014 г.
Статус
Корпорация Майкрософт подтверждает наличие этой проблемы в своих продуктах, которые перечислены в разделе «Применяется к».
Ссылки
См. термины, которые корпорация Майкрософт использует для описания обновлений программного обеспечения.
svg не отображается в браузере Chrome
Проблема в том, что в Firefox и IE данная конструкция работает, а в Chrome нет. В браузере в место картинки пустота, хотя в DOM элемент есть. Подскажите, как исправить.
Ответы (3 шт):
нужно указать тип, к примеру type=»image/svg+xml»
Если Вы хотите реально получить помощь в решении вашей проблемы, то необходимо давать максимально возможное количество информации. Прежде всего нужен код вашего SVG изображения.
- А сейчас остается только гадать, так как вы привели один из многочисленных способов добавления svg в HTML. И этот способ работает во всех браузерах включая IE11 , при нахождении svg изображения, как локально, так и удаленно.
Пример загрузки внешнего svg
- Если у вас локальный файл svg нормально отображается в браузерах, но не виден в вашей HTML страничке, то может стоит поискать ошибки в верстке?
Ниже пример респонсивного svg
У меня был проблема в сохранении SVG в Иллюстраторе. Вот параметры при которых svg стал отображаться.