Фрагмент SVG Sprite + фоновое изображение CSS в Safari

Я работаю над сайтом, где я использую файл фрагментов SVG и загружаю, в частности, SVG через фоновые изображения CSS.

У меня также есть запасной вариант PNG, и я использую ниже в качестве основы для работы: https://css-tricks.com/a-complete-guide-to-svg-fallbacks/

ПРИМЕР

.ico-arrow-right {
  background: url(ico-arrow-right.png);
  background: url(sprite-collection.svg#arrowright),
    linear-gradient(transparent, transparent);
}

Проблема в том, что он работает нормально в большинстве браузеров, но в Safari для настольных компьютеров и браузеров IOS SVG не отображается, а просто показывает пустое пространство. Рассматривая это, кажется, что Safari /webkit на устройствах не любит спрайты фрагментов SVG при использовании их с фоновыми изображениями CSS.

Есть ли какое-то решение / способ обойти это? Я все еще хочу использовать фоновое изображение CSS для извлечения PNG/SVG, и не хочу возвращаться к использованию отдельных файлов SVG, поскольку существует более 60 svgs, и я не хочу, чтобы все эти запросы к серверу!

Спасибо всем

Источник

0 ответов

Добавьте заголовок "content-type" для файлов SVG на вашем сервере, например, в apache, добавив это в ваш файл.htaccess:

AddType image/svg+xml .svg .svgz

Источник
Другие вопросы по тегам