postnov_daniil
@postnov_daniil
Начинающий фронтендер

Как решить проблему с отрицательными значениями viewBox у svg?

Я делаю svg-спрайт с помощью плагина gulp-svg-sprites.

Вот таск для создания спрайта:
gulp.task('svg-sprite', function (cb) {
    return gulp.src('src/images/svg-separate/**/*.svg')
        .pipe(svgSprite({
            mode: "symbols",
            // preview: false,
            selector: "svg-%f",
            svg: {
                symbols: 'svg_sprite.pug'
            }
        }
        ))
        .pipe(gulp.dest('src/pug/partails/'))
});


Проблема в том, что если у svg в viewBox есть отрицательное значение - оно после компиляции становится положительным и перед ним добавляется NaN.

Начальное значение: viewBox="-49 141 512 512"
После компиляции: viewBox="NaN 49 141 512 512"

Иконки с отрицательным значением выглядят обрезано.
Сталкивался ли кто-то с такой проблемой? Есть идеи как можно решить?
Если нет, посоветуйте хороший плагин для svg-спрайтов. Спасибо
  • Вопрос задан
  • 37 просмотров
Пригласить эксперта
Ответы на вопрос 2
iamd503
@iamd503
Верстальщик
Пересохрани svg, чтобы по нулям всё было. Бывает такое да, когда из люстры сохраняешь.
Ответ написан
dpr
@dpr
frontend developer
Я всегда svg иконки предварительно подготавливаю в люстре — привожу к единому размеру (viewBox), обычно 128 или 256 и выравниваю иконку внутри области, а также по дробным пикселям. Потом сохраняю в svg, которые прекрасно и без глюков хаваются галпом.
Ответ написан
Ваш ответ на вопрос

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

Войти через TM ID
Похожие вопросы
Digital Sharks Казань
от 60 000 до 65 000 руб.
CS Money Санкт-Петербург
от 120 000 до 150 000 руб.
18 янв. 2019, в 18:11
1000 руб./за проект
18 янв. 2019, в 18:04
10000 руб./за проект