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

当某些图标包含其他图标的部分时，某些图标会被剪裁：

enter image description here

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

enter image description here

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

这是由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文件中复制它。

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

＆＃13;

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

＆＃13;

我认为您只需要检查原始SVG数据并确保所有坐标都在可视范围内（0≤x≤66,0≤y≤45）。

使用grunt svg精灵时，为什么我的SVG图标会被剪裁？

1 个答案: