1

我曾经使用SVG Spritemap Webpack Plugin来自动编译 svg sprite。

我的插件配置看起来像这样

 new SVGSpritemapPlugin([
            './src/common/components/VSvgSprite/icons/illustration/**/*.svg',
            './src/common/components/VSvgSprite/icons/decor/**/*.svg'
        ],{
            output: {
                filename: 'img/graphics-sprite.svg',
                svg4everybody: true,
                svgo: true,
            },
            sprite: {
                prefix: false,
                generate: {
                    title: false,
                    use: true,
                    view: true
                }
            },
        }),

编译后我有一个带有 svg 的精灵文件

<svg xmlns="http://www.w3.org/2000/svg">
    <symbol id="test" viewBox="0 0 400 150"><path d="M1920 195H0V76.744C178.587 27.184 366.14.536 559.586.008L565.45 71.556l5.414 1.455c126.25 32.248 252.57 49.53 378.958 51.845 139.624 2.559 279.453-13.125 419.497-47.09l4.244-1.035V195z"/></symbol>
    <view id="test" viewBox="0 0 400 150"/>
    <symbol id="wave" viewBox="0 0 1920 195"><path fill="#0b9a8" d="M1920 195H0V76.744C178.587 27.184 366.14.536 559.586.008L565.45 0l5.716.008c186.645.496 367.807 25.308 540.722 71.556l5.414 1.455c126.25 32.248 252.57 49.53 378.958 51.845 139.624 2.559 279.453-13.125 419.497-47.09l4.244-1.035V195z"/></symbol>
    <view id="wave" viewBox="0 150 1920 195"/>
</svg>

在这里，我尝试在 Vue 组件中使用片段wave到.scss文件中 component.scss

.block {
  height: 500px;
  width: 100%;
  background: url($path-to-sprite + '#wave') no-repeat;
  background-size: cover;
}

但是网页上的fragment没有被渲染，因为所有的fragment都是从sprite中渲染出来的。如果我使用这样的背景样式

.block {
  height: 500px;
  width: 100%;
  background: url($path-to-decor-sprite + "#svgView(viewBox(0, 150, 1920, 195))");
  background-size: cover;
}

万事皆安。但这对我的项目没有用处。

4

0 回答 0