TheExplay
@TheExplay
Верстальщик - Junior FrontEnd

Почему вставка svg через data:image не работает в Mozille?

Всем привет!
Вопрос следующий, имеется функция в less где background-image задаётся через url('data:image.....')
ссылка
В браузерах на движке webkit, такая штука работает, но в ие и мозилле, изображение не может загрузиться.

Как сделать кроссбраузерное решение?
Спасибо за Ваши ответы!
  • Вопрос задан
  • 1102 просмотра
Пригласить эксперта
Ответы на вопрос 1
@kirick
У меня недавно была такая же проблема, но я работаю через Стайлус.
Решение вкупе с Галпом оказалось очень простым — в таске Галпа была описана глобальная функция base64(), которую я вызывал из Стайлуса. А вот о том, как добавить свои функции в компилятор Лесс: stackoverflow.com/a/26224903

Вот примерный Стайлус:
.element
  background-image unquote("url(data:image/svg+xml;base64," + base64("<svg></svg>") + ")"


А вот таск в Галпе с дефайном глобальной функции, которая возвращает в компилятор Стайлуса base64 от текста:
gulp.task('stylus', function(){
  gulp.src([ './css/*.styl', '!./css/_*.styl' ])
  .pipe(stylus({
    define: {
      'base64': function(input){
        return (new Buffer(input.val)).toString('base64');
      }
    }
  }))
  .on('error', console.log)
  .pipe(gulp.dest('./build/css'));
});
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы