Webpack SVG渐变问题

Question

我正在尝试用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和svg4everbody，我仍然看不到图标(而其他只填充样式的图标是可见的(

Answer 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
}
}),

Answer 2

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

你可以尝试的另一件事是使用完全打开和关闭标签，所以<。路径>lt；/。路径>(此处不显示点(，而不是人手不足的<路径/>。验证器经常被人手不足的标签卡住，因为这对于严格的SVG/XML解析器来说并不是真正合适的层次结构。考虑到这一点，您也可以尝试放弃xml标记。