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-спрайтов. Спасибо
  • Вопрос задан
  • 44 просмотра
Пригласить эксперта
Ответы на вопрос 2
iamd503
@iamd503
Верстальщик
Пересохрани svg, чтобы по нулям всё было. Бывает такое да, когда из люстры сохраняешь.
Ответ написан
delphinpro
@delphinpro
frontend developer
Я всегда svg иконки предварительно подготавливаю в люстре — привожу к единому размеру (viewBox), обычно 128 или 256 и выравниваю иконку внутри области, а также по дробным пикселям. Потом сохраняю в svg, которые прекрасно и без глюков хаваются галпом.
Ответ написан
Ваш ответ на вопрос

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

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