为什么我的 SVG 图标在使用 grunt svg sprite 时被剪掉了？

Question

我正在使用 grunt-svg-sprite 模块 (https://www.npmjs.com/package/grunt-svg-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:

<div class="registration-icon-email"></div>

CSS:

.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;
}

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

当我在 inkscape 中检查生成的 SVG sprite 时，SVG 文件出现在 canvas/artboard 之外（背景中的矩形在 inkscape 中是 artboard/canvas）：

关于可能导致此问题的任何想法？任何帮助将不胜感激。

这里是 grunt-svg-sprite 生成的 SVG 精灵：

    <?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>

Answer 1

我认为 grunt-svg-sprite 没有对您的 SVG 数据做任何特别花哨的事情。很可能它只是直接从 src/app/assets/artwork/svgs.

中的 SVG 文件复制它

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

<svg viewBox="-1 -1 66.1 44.86" width="66.1" height="44.86">
  <path fill="#000" 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.72
    c-.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 数据并确保所有坐标都在可见范围内（0≤x≤66，0≤y≤45）。

为什么我的 SVG 图标在使用 grunt svg sprite 时被剪掉了？

Why are my SVG icons clipped when using grunt svg sprite?

html

css

svg

gruntjs