svg 不是从符号 svg 精灵渲染在外部文件中

编程问答 2022-05-27

问题描述

我曾经使用 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;
}

但是在网页上的片段没有被渲染，因为从精灵渲染了所有的片段。 如果我使用这样的背景样式

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

一切都很好。但这对我的项目来说不是很有用。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

htmljavascriptsvgsvgsvgsvg-sprite