无法更改SVG的填充颜色

时间:2020-06-09 11:11:58

标签: svg svg-sprite

我对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>

现在它已加载图标,但我无法更改填充颜色...

有帮助吗?

0 个答案:

没有答案