如何解决gulp-svg-sprites生成SVG雪碧图时viewBox负值异常问题？

你遇到的这个问题，其实是gulp-svg-sprites插件在解析带负值的viewBox时的一个老bug——它错误地把负号当成无效字符，导致负值被转成NaN加原绝对值，直接破坏了viewBox的正确属性，最后图标就被裁剪了。

这里有几个可行的解决方案，你可以按顺序试试：

方案1：给插件加自定义SVG转换函数 #

在插件处理SVG之前，手动接管viewBox的解析逻辑，通过transformSvg选项来修正这个问题：

gulp.task('svg-sprite', function () {
  return gulp.src('src/images/svg-separate/**/*.svg')
    .pipe(svgSprite({
      mode: "symbols",
      selector: "svg-%f",
      svg: { symbols: 'svg_sprite.pug' },
      // 添加自定义转换函数修复viewBox解析
      transformSvg: function(svg, cb) {
        // 匹配viewBox属性并重新解析坐标
        const fixedSvg = svg.replace(/viewBox="([\d\s-]+)"/g, (match, viewBoxStr) => {
          // 把字符串拆成数字数组，确保负值被正确识别
          const coords = viewBoxStr.split(/\s+/).map(Number);
          return `viewBox="${coords.join(' ')}"`;
        });
        cb(null, fixedSvg);
      }
    } ))
    .pipe(gulp.dest('src/pug/partails/'))
});

这个函数会在插件处理SVG之前，先手动提取viewBox的坐标值，重新正确解析（包括负值）后再放回代码里，绕开插件内部的错误解析逻辑。

方案2：用gulp-cheerio预处理SVG文件 #

如果自定义转换函数没起作用，你可以先用gulp-cheerio提前处理所有SVG，确保viewBox的负值被正确保留：

首先安装依赖：

npm install gulp-cheerio --save-dev

然后修改你的Gulp任务：

const cheerio = require('gulp-cheerio');

gulp.task('svg-sprite', function () {
  return gulp.src('src/images/svg-separate/**/*.svg')
    // 先预处理SVG，修正viewBox的解析问题
    .pipe(cheerio({
      run: function ($) {
        $('svg').each(function() {
          const $svg = $(this);
          const viewBox = $svg.attr('viewBox');
          if (viewBox) {
            // 重新解析坐标并设置viewBox，确保负值正确传递
            const coords = viewBox.split(/\s+/).map(Number);
            $svg.attr('viewBox', coords.join(' '));
          }
        });
      },
      parserOptions: { xmlMode: true }
    }))
    .pipe(svgSprite({
      mode: "symbols",
      selector: "svg-%f",
      svg: { symbols: 'svg_sprite.pug' }
    } ))
    .pipe(gulp.dest('src/pug/partails/'))
});

方案3：换成更活跃的SVG雪碧图插件 #

如果上面的方法都解决不了，那可能是gulp-svg-sprites本身已经停止维护了（这个插件最后一次更新还是好几年前），你可以考虑切换到更活跃的替代方案gulp-svg-sprite（注意多了一个e）：

先安装新插件：

npm install gulp-svg-sprite --save-dev

然后调整任务配置（这个插件的API略有不同，适配你的需求）：

const svgSprite = require('gulp-svg-sprite');

gulp.task('svg-sprite', function () {
  return gulp.src('src/images/svg-separate/**/*.svg')
    .pipe(svgSprite({
      mode: {
        symbol: {
          dest: '.',
          sprite: 'svg_sprite.pug',
          example: false // 不需要预览页面的话就关掉
        }
      },
      shape: {
        id: {
          generator: 'svg-%f' // 对应原来的selector配置
        }
      }
    }))
    .pipe(gulp.dest('src/pug/partails/'));
});

这个插件对viewBox的解析更准确，而且一直在维护，能更好地处理带负值的SVG属性。

内容的提问来源于stack exchange，提问作者Даниил Постнов