Webpack SVG 渐变问题答案

【问题标题】：Webpack SVG gradient issuesWebpack SVG 渐变问题
【发布时间】：2021-02-07 08:44:41
【问题描述】：

我正在尝试使用 webpack 和 svg-spritemap-webpack-plugin 构建 svg 精灵。虽然它使用常规 svg 构建漂亮的精灵，但它不会渲染带有渐变的 svg，我不明白为什么。

与精灵生成相关的 webpack 配置：

new SVGSpritemapPlugin('./src/assets/icons/icons-colored/**/*.svg', {
      output: {
        filename: 'assets/sprites/sprites-colored/sprites.svg',
        svg4everybody: true,
        svgo: {
          plugins: [
            { inlineStyles: { onlyMatchedOnce: false } },
            { minifyStyles: true },
            { cleanupIDs: { minify: false }}
          ]
        }
      },
      sprite: {
        prefix: false
      }
    }),

我正在尝试使用的 svg 图标：

<?xml version="1.0" encoding="iso-8859-1"?>
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-35.2988" y1="646.7559" x2="-35.2988" y2="623.7559" gradientTransform="matrix(22.2609 0 0 -22.2609 1041.7826 14397.3477)">
    <stop  offset="0" style="stop-color:#1AD6FD"/>
    <stop  offset="1" style="stop-color:#1D67F0"/>
</linearGradient>
<path fill="url(#SVGID_1_)" d="M367.304,133.565H11.13c-6.144,0-11.13,4.986-11.13,11.13V500.87
    C0,507.014,4.986,512,11.13,512h356.174c6.144,0,11.13-4.986,11.13-11.13V144.696C378.435,138.552,373.448,133.565,367.304,133.565
     M512,11.13v356.174c0,6.144-4.986,11.13-11.13,11.13h-89.043c-6.144,0-11.13-4.986-11.13-11.13v-244.87
    c0-6.144-5.009-11.13-11.13-11.13h-244.87c-6.144,0-11.13-4.986-11.13-11.13V11.13c0-6.144,4.986-11.13,11.13-11.13H500.87
    C507.014,0,512,4.986,512,11.13"/>
</svg>

似乎它已正确传递给精灵（带有渐变和正确的 id），但当我尝试使用它时，我仍然看到一个盲点而不是图标。

另外，这个问题似乎与 svgo 及其设置无关。如果我从我的配置中删除 svgo 和 svg4everybody，我仍然看不到图标（而其他具有仅填充样式的图标可见）

【问题讨论】：

标签： html svg webpack

【解决方案1】：

通过svg4everybody的附加设置解决了这个问题：

new SVGSpritemapPlugin('./src/assets/icons/icons-colored/**/*.svg', {
      output: {
        filename: 'assets/sprites/sprites-colored/sprites.svg',
        svg4everybody: {
           polyfill: true // this line makes things work
        },
        svgo: {
          plugins: [
            { inlineStyles: { onlyMatchedOnce: false } },
            { minifyStyles: true },
            { cleanupIDs: { minify: false }}
          ]
        }
      },
      sprite: {
        prefix: false
      }
    }),

【讨论】：

【解决方案2】：

我不能真正评论 Webpack，不使用它，但严格来说，您的 linearGradient 标签应该在 defs 标签内，以 100% 符合 SVG 1.1 规范。

您可以尝试的另一件事是使用完整的打开和关闭标签，以便 <.path>... （此处不显示点）而不是简写一个。验证器通常会被短标记的标签阻塞，因为对于严格的 SVG/XML 解析器来说，这并不是真正合适的层次结构。考虑到这一点，您也可以尝试放弃 xml 标签。

【讨论】：