我对svg的填充有问题。
我正在用gulp-svg-sprite创建svg精灵:
gulp.task('sprites', function () {
return gulp.src('icons/**/*.svg')
.pipe(svgSprite({
shape: {
// Set maximum dimensions
dimension: {
maxWidth: 24,
maxHeight: 24
},
id: {
separator: '-',
generator: 'filled-%s'
},
dest: 'out' // Keep the intermediate files
},
mode: {
view: { // Activate the «view» mode
bust: true,
dimensions: true,
common: "icon-filled",
prefix: '.icon-%s',
sprite: '../../../icon-filled.svg',
render: {
scss : {
dest : '_filled.scss',
}
}
},
inline: true,
symbol: true // Activate the «symbol» mode
}
}))
.pipe(gulp.dest('out'));
并创建svg sprite文件,如下所示:
<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol fill="none" viewBox="0 0 24 24" id="filled-chart" xmlns="http://www.w3.org/2000/svg"><path d="M20.813 18.563H4.688V3.938A.188.188 0 004.5 3.75H3.187A.188.188 0 003 3.938v16.125c0 .103.084.187.188.187h17.625a.188.188 0 00.187-.188V18.75a.188.188 0 00-.188-.188zm-14.438-1.5h12.563a.188.188 0 00.187-.188V6.656a.188.188 0 00-.321-.133l-4.929 4.929-2.94-2.907a.188.188 0 00-.264 0l-4.43 4.444a.184.184 0 00-.053.131v3.755c0 .103.084.188.187.188z" fill="#000"/></symbol></svg>
之后,我将sprite包含在php中,并像这样使用它:
<svg viewBox="0 0 24 24" class="icon">
<use xlink:href="#filled-chart"></use>
</svg>
现在它已加载图标,但我无法更改填充颜色...
有帮助吗?