By
Schamil74
Всем привет!
Столкнулся проблемой отображения svg спрайтов в ie11.
Описываю проделанные мною два варианта:
В 1ом варианте svg экспортировал через плагин generate в photoshop 2015. Работает во всех браузерах, но не реагирует на css, даже если почистить все атрибуты у svg.
Во 2ом сложнее сохранял как .ai и конвертировал в svg. Не работает только в ie11 (версии ниже не проверял, но это и не нужно), но реагирует на css, причем не отображаются только некоторые иконки.
Спрайт прикрепляю сразу после открывающего тэга body и скрываю его. Обращаюсь к спрайту через, например (синтаксис pug:
svg.contacts__flag(width="60", height="90")
use(xlink:href="#flag")
Ниже сама верстка со спрайтом только 2го варианта
https://schamil74.github.io/Mishka
Таск для спрайтов
gulp.task('symbols', function () {
return gulp.src("source/img/icons/*.svg")
.pipe(svgmin())
.pipe(cheerio({
run: function ($) {
$('[fill]').removeAttr('fill');
$('[stroke]').removeAttr('stroke');
$('[style]').removeAttr('style');
},
parserOptions: {xmlMode: true}
}))
.pipe(replace('>', '>'))
.pipe(svgstore({
inlineSvg: true
}))
.pipe(rename("symbols.pug"))
.pipe(gulp.dest("templates/blocks/"));
});
Скрин того, что видит chrome и firefox (слева), и ie11 (справа). Повторюсь, что не все иконки не отображаются
Пробовал подключать svgxuse и svg4everybody, но толку нет.
Какую еще предоставить инфу?
PS: Я все еще новичок.