内联SVG未显示在pug和网页包中
我正在使用带有帕格的Webpack4作为我的模板引擎。我的配置都设置好了,一切正常 我想在我的pug模板中添加奇怪的内联SVG图标,并且正在使用这个图标,它对我的第一个SVG有效,但对我的第二个SVG无效 我的“通用”配置文件(根据网页文档,我也有开发和产品版本):内联SVG未显示在pug和网页包中,svg,webpack,pug-loader,Svg,Webpack,Pug Loader,我正在使用带有帕格的Webpack4作为我的模板引擎。我的配置都设置好了,一切正常 我想在我的pug模板中添加奇怪的内联SVG图标,并且正在使用这个图标,它对我的第一个SVG有效,但对我的第二个SVG无效 我的“通用”配置文件(根据网页文档,我也有开发和产品版本): const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const webpack = require('web
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const HtmlWebpackInlineSVGPlugin = require('html-webpack-inline-svg-plugin');
module.exports = {
entry: {
app: './src/js/index.js'
},
output: {
path: path.resolve(__dirname, 'dist')
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.pug',
title: 'Output Management',
minify: {
removeScriptTypeAttributes: true // removes type="text/javascript" from injected <script> tags
}
}),
new HtmlWebpackInlineSVGPlugin({
runPreEmit: true,
}),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
{
test: /\.pug$/,
loader: 'pug-loader',
query: {
pretty: true // false is default. Set to true to not minify resulting html
}
}
]
}
};
<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 15 15">
<path d="m1.3761 1.3683 12.288 12.288m-12.328-0.024469 12.288-12.288" fill="none" stroke="currentColor" stroke-width="2.3272"></path>
</svg>
<?xml version="1.0" encoding="UTF-8"?>
<svg class="search__icon" role="img" aria-labelledby="header-search-ico" width="30" height="30" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg">
<title id="header-search-ico">Search</title>
<path d="m13.052 6.4998c-5.2483 8.909e-4 -9.5022 4.2558-9.502 9.5041 8.962e-4 5.2476 4.2545 9.5012 9.502 9.502 5.2483 2.89e-4 9.5033-4.2536 9.5041-9.502 2.9e-4 -5.2491-4.255-9.5043-9.5041-9.5041zm7.0353 16.224 6.5139 6.6193s0.4042 0.41477-6.5139-6.6193z" fill="none" stroke-linecap="round"></path>
</svg>
close-icon.svg内容:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const HtmlWebpackInlineSVGPlugin = require('html-webpack-inline-svg-plugin');
module.exports = {
entry: {
app: './src/js/index.js'
},
output: {
path: path.resolve(__dirname, 'dist')
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.pug',
title: 'Output Management',
minify: {
removeScriptTypeAttributes: true // removes type="text/javascript" from injected <script> tags
}
}),
new HtmlWebpackInlineSVGPlugin({
runPreEmit: true,
}),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
{
test: /\.pug$/,
loader: 'pug-loader',
query: {
pretty: true // false is default. Set to true to not minify resulting html
}
}
]
}
};
<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 15 15">
<path d="m1.3761 1.3683 12.288 12.288m-12.328-0.024469 12.288-12.288" fill="none" stroke="currentColor" stroke-width="2.3272"></path>
</svg>
<?xml version="1.0" encoding="UTF-8"?>
<svg class="search__icon" role="img" aria-labelledby="header-search-ico" width="30" height="30" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg">
<title id="header-search-ico">Search</title>
<path d="m13.052 6.4998c-5.2483 8.909e-4 -9.5022 4.2558-9.502 9.5041 8.962e-4 5.2476 4.2545 9.5012 9.502 9.502 5.2483 2.89e-4 9.5033-4.2536 9.5041-9.502 2.9e-4 -5.2491-4.255-9.5043-9.5041-9.5041zm7.0353 16.224 6.5139 6.6193s0.4042 0.41477-6.5139-6.6193z" fill="none" stroke-linecap="round"></path>
</svg>
search-icon.svg内容:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const HtmlWebpackInlineSVGPlugin = require('html-webpack-inline-svg-plugin');
module.exports = {
entry: {
app: './src/js/index.js'
},
output: {
path: path.resolve(__dirname, 'dist')
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.pug',
title: 'Output Management',
minify: {
removeScriptTypeAttributes: true // removes type="text/javascript" from injected <script> tags
}
}),
new HtmlWebpackInlineSVGPlugin({
runPreEmit: true,
}),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
{
test: /\.pug$/,
loader: 'pug-loader',
query: {
pretty: true // false is default. Set to true to not minify resulting html
}
}
]
}
};
<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 15 15">
<path d="m1.3761 1.3683 12.288 12.288m-12.328-0.024469 12.288-12.288" fill="none" stroke="currentColor" stroke-width="2.3272"></path>
</svg>
<?xml version="1.0" encoding="UTF-8"?>
<svg class="search__icon" role="img" aria-labelledby="header-search-ico" width="30" height="30" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg">
<title id="header-search-ico">Search</title>
<path d="m13.052 6.4998c-5.2483 8.909e-4 -9.5022 4.2558-9.502 9.5041 8.962e-4 5.2476 4.2545 9.5012 9.502 9.502 5.2483 2.89e-4 9.5033-4.2536 9.5041-9.502 2.9e-4 -5.2491-4.255-9.5043-9.5041-9.5041zm7.0353 16.224 6.5139 6.6193s0.4042 0.41477-6.5139-6.6193z" fill="none" stroke-linecap="round"></path>
</svg>
搜寻
结果html
<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="header-search-ico" class="search__icon" viewBox="0 0 30 30">
<path fill="none" d="M13.052 6.5a9.504 9.504 0 1 0 .003 19.007A9.504 9.504 0 0 0 13.052 6.5zm7.035 16.224l6.514 6.62s.404.414-6.514-6.62z"></path></svg>
因此,
标记和下面的属性被剥离,加上路径看起来一团糟。有没有人有使用webpack在pug模板中使用内联SVG的经验
- 角色
- 宽度
- 高度
- 笔划线头
stroke
属性(或相应的CSS属性)。因此,fill
和stroke
都计算为“none”
,图标保持不可见。顺便说一句,去掉的标记和属性由SVGO配置控制。为了提高a11y,我将设置removeTitle:false
,其他一切都是合理的。谢谢@ccprog,我看不见树上的树木了!加上这个作为答案,我会勾选它。:-)您的问题与帕格或网页包无关,路径也可以,它只是相对于绝对坐标数据进行转换。缺少的是search-icon.svg中的stroke
属性(或相应的CSS属性)。因此,fill
和stroke
都计算为“none”
,图标保持不可见。顺便说一句,去掉的标记和属性由SVGO配置控制。为了提高a11y,我将设置removeTitle:false
,其他一切都是合理的。谢谢@ccprog,我看不见树上的树木了!加上这个作为答案,我会勾选它。:-)