By

文章目录

今天在使用svg-sprite-loader生成svg symbol的时候发现同事给的svg文件有点问题，生成出来svg文件里面有重复的样式名，导致各个图标的颜色不正常。

1
2
3
4
5
6
7
8
9
10
11
<style type="text/css">
   <![CDATA[
    .fil1 {fill:#A0D9F6;fill-rule:nonzero}
    .fil2 {fill:#FEFEFE;fill-rule:nonzero}
    .fil0 {fill:#0A80DF;fill-rule:nonzero}
   ]]>
  </style>
 </defs>
 <g id="图层_x0020_1">
  <metadata id="CorelCorpID_0Corel-Layer"/>
  <path class="fil0" d="M2500 0c-1381,0 -2500,1119 -2500,2500 0,1381 1119,2500 2500,2500 1381,0 2500,-1119 2500,-2500 0,-1381 -1119,-2500 -2500,-2500z"/>

svg文件里面对样式的描述是通过 class 属性引用 .fil0 这样的。每个svg里面都是相同的命名，生成后加载到页面上，图标的颜色就不正常了。

上github找了一圈，纯nodejs的实现中没找到相关的处理方法，后来发现 svg-objects-export 这个项目。里面调用了inkscape这个开源的矢量图工具。然后研究了一下相关命令行的调用，发现先用inkscape转成pdf再转回plain svg就可以解决这个问题，直接svg转plain svg无法解决。虽然绕了点，暂时先不管了，直接用gulp写了一段脚本，转了它。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
return gulp.src('./resources/www/svg/*.svg', {read: false})
        .pipe(shell([
            'inkscape -z --export-pdf <%=svg2pdf(file.path)%> <%=file.path %>',
            'inkscape -z --export-plain-svg <%=cleanSvg(file.path)%> <%=svg2pdf(file.path)%>',
            'echo <%=file.path%>'
        ], {
            templateData: {
                svg2pdf: function (s) {
                    s = s.replace(/www\/svg/, 'www/svg2pdf');
                    return s.replace(/\.svg/, '.pdf');
                },
                cleanSvg: function (s) {
                    return s.replace(/www\/svg/, 'www/cleanSvg');
                }
            }
        }));

命令很简单，就是调用inkscape的cli工具直接转，转完后再用gulp-svgmin 压缩一下，就很精简了。

1
2
3
4
5
gulp.task('svgmin', function () {
    return gulp.src('./resources/www/cleanSvg/*.svg')
        .pipe(svgmin())
        .pipe(gulp.dest('./resources/www/minSvg'));
});
文章目录