Html 为什么在使用grunt SVG sprite时我的SVG图标会被剪裁？

我正在使用grunt svg sprite模块（）创建一个具有视图模式和符号模式的sprite，如下所示：

svg_sprite: {
        svg_icons: {
            expand: true,
            cwd: 'src/app/assets/artwork/svgs',
            src: ['**/*.svg'],
            dest: 'src/app/assets/artwork',


            options: {

                shape: {
                    spacing: { // Spacing related options
                        padding: 1, // Padding around all shapes
                        box: 'content' // Padding strategy (similar to CSS `box-sizing`)
                    },

                },

                mode: {


                    view: { // Activate the «view» mode 



                        bust: false,
                        render: {
                            scss: false // Activate Sass output (with default options) 
                        },
                        dest: 'svgs-view',
                        prefix: 'svg-view-id',
                        sprite: 'svg-views',
                        example: false,


                    },

                    symbol: {
                        prefix: 'shape',
                        dest: 'inline-svgs',
                        sprite: 'cw-svg-sprites.svg',
                        inline: false,
                        render: {
                            less: false

                        },
                        bust: false,
                        example: true

                    }


                }

            }
        }
    },

这将按预期生成名为svg-views.svg的svg文件。当我尝试使用以下CSS/HTML在页面中显示SVG时：

HTML:

某些图标被剪裁，而某些图标包含其他图标的一部分：

当我在inkscape中检查生成的SVG精灵时，SVG文件出现在画布/艺术板的外部（背景中的矩形是inkscape中的艺术板/画布）：

你知道是什么导致了这一切吗？任何帮助都将不胜感激

以下是grunt SVG sprite生成的SVG sprite：

    <?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<svg width="67" height="45" viewBox="0 0 67 45" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <view id="cw_email_no_bg_32x32" viewBox="0 0 66.1 44.86" />
    <svg viewBox="-1 -1 66.1 44.86" width="66.1" height="44.86">
        <path fill="#fff" d="M16.082 20.274h.015c.483 0 .962-.14 1.354-.396l.1-.067c.02-.017.05-.02.072-.045l1.218-1.01 29.147-24.05c-.057-.084-.16-.14-.27-.14h-63.43c-.076 0-.15.026-.208.073l30.49 25.136c.387.32.935.5 1.512.5zM-15.922-5.36l-.13 42.387L5.792 15.98-15.92-5.36zm42.155 21.462L48.05 37.04l-.063-42.333-21.754 21.395zm-6.937 5.72c-.873.712-2.01 1.106-3.205 1.106-1.197 0-2.334-.384-3.2-1.104l-5.005-4.122-23.934 19.325v.063c0 .183.152.34.342.34h63.423c.187 0 .336-.157.336-.34v-.056l-23.91-19.21-4.844 3.997z" />
    </svg>
</svg>

---

我不认为grunt svg sprite对您的svg数据做了任何特别有趣的事情。很可能它只是直接从src/app/assets/artwork/svgs中的SVG文件复制它

这是邮件图标的外观（从您提供的精灵数据复制并粘贴，颜色更改为黑色）：

.registration-icon-email {
    background-image: url('images/svg-views.svg#cw_email_no_bg_32x32');
    background-size:contain;
    background-repeat:no-repeat;
    width:2rem;
    height:2rem;
}

    <?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<svg width="67" height="45" viewBox="0 0 67 45" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <view id="cw_email_no_bg_32x32" viewBox="0 0 66.1 44.86" />
    <svg viewBox="-1 -1 66.1 44.86" width="66.1" height="44.86">
        <path fill="#fff" d="M16.082 20.274h.015c.483 0 .962-.14 1.354-.396l.1-.067c.02-.017.05-.02.072-.045l1.218-1.01 29.147-24.05c-.057-.084-.16-.14-.27-.14h-63.43c-.076 0-.15.026-.208.073l30.49 25.136c.387.32.935.5 1.512.5zM-15.922-5.36l-.13 42.387L5.792 15.98-15.92-5.36zm42.155 21.462L48.05 37.04l-.063-42.333-21.754 21.395zm-6.937 5.72c-.873.712-2.01 1.106-3.205 1.106-1.197 0-2.334-.384-3.2-1.104l-5.005-4.122-23.934 19.325v.063c0 .183.152.34.342.34h63.423c.187 0 .336-.157.336-.34v-.056l-23.91-19.21-4.844 3.997z" />
    </svg>
</svg>