Webpack SVG 渐变问题
Posted
技术标签:
【中文标题】Webpack SVG 渐变问题【英文标题】:Webpack SVG gradient issues 【发布时间】: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,我仍然看不到图标(而其他具有仅填充样式的图标可见)
【问题讨论】:
【参考方案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 标签。
【讨论】:
以上是关于Webpack SVG 渐变问题的主要内容,如果未能解决你的问题,请参考以下文章
将 react-svg-loader 添加到 webpack
如何使用 webpack ng-include 一个 svg