Webpack 从我的样式表中的内联 SVG 中去除标签，我不知道为啥
Posted
技术标签:
【中文标题】Webpack 从我的样式表中的内联 SVG 中去除标签，我不知道为啥【英文标题】：Webpack strips tags out of inline SVGs in my stylesheets and I don't know whyWebpack 从我的样式表中的内联 SVG 中去除标签，我不知道为什么 【发布时间】：2021-12-28 00:39:19 【问题描述】：我将 Gatsby 与 Tailwind CSS 结合使用，构建步骤将动画从我的样式表中的内联 SVG 中剥离出来。
这是我的/styles/global.css，内嵌 SVG 中的动画：
@tailwind base;
@tailwind components;
@tailwind utilities;
.animate-bg-blue-edges
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1000' height='560' preserveAspectRatio='none' viewBox='0 0 1000 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1068%26quot%3b)' fill='none'%3e%3cpath d='M33.92140997279915 576.3200414218256L135.6146172499762 474.62683414464857 33.92140997279912 372.9336268674715-67.77179730437794 474.62683414464857z' fill='rgba(0%2c 113%2c 217%2c 0.05)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M684.992%2c535.357C731.366%2c534.81%2c771.376%2c503.967%2c792.577%2c462.72C812.066%2c424.804%2c805.582%2c380.198%2c783.484%2c343.741C762.268%2c308.74%2c725.908%2c284.205%2c684.992%2c285.23C645.618%2c286.216%2c615.5%2c315.03%2c594.69%2c348.469C572.255%2c384.519%2c554.45%2c427.076%2c572.923%2c465.308C593.465%2c507.821%2c637.779%2c535.913%2c684.992%2c535.357' fill='rgba(0%2c 113%2c 217%2c 0.06)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M655.352%2c216.654C699.12%2c214.919%2c738.519%2c192.137%2c761.091%2c154.599C784.424%2c115.794%2c790.735%2c67.665%2c768.736%2c28.088C746.161%2c-12.526%2c701.819%2c-35.515%2c655.352%2c-35.631C608.678%2c-35.747%2c565.265%2c-12.342%2c540.988%2c27.522C515.668%2c69.099%2c508.831%2c121.946%2c534.02%2c163.602C558.5%2c204.086%2c608.079%2c218.528%2c655.352%2c216.654' fill='rgba(0%2c 113%2c 217%2c 0.05)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M746.0565729747942 297.6892313956009L764.2532381400358 204.07550454249028 670.6395112869252 185.8788393772487 652.4428461216836 279.49256623035933z' fill='rgba(0%2c 113%2c 217%2c 0.08)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M720.044%2c80.366C743.919%2c81.1%2c770.685%2c79.529%2c783.525%2c59.387C797.048%2c38.174%2c791.048%2c10.788%2c778.175%2c-10.826C765.639%2c-31.875%2c744.533%2c-46.515%2c720.044%2c-47.202C694.315%2c-47.924%2c668.46%2c-36.762%2c655.976%2c-14.253C643.796%2c7.706%2c648.9%2c34.889%2c662.979%2c55.682C675.433%2c74.075%2c697.841%2c79.684%2c720.044%2c80.366' fill='rgba(0%2c 113%2c 217%2c 0.05)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M239.2%2c559.944C274.52%2c560.667%2c309.214%2c545.166%2c327.134%2c514.722C345.295%2c483.868%2c342.217%2c445.812%2c324.789%2c414.538C306.846%2c382.339%2c276.061%2c357.057%2c239.2%2c356.923C202.141%2c356.789%2c169.903%2c381.179%2c152.528%2c413.913C136.205%2c444.665%2c139.518%2c481.306%2c157.287%2c511.245C174.664%2c540.523%2c205.161%2c559.247%2c239.2%2c559.944' fill='rgba(0%2c 113%2c 217%2c 0.04)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M870.8848484464366 393.0320111371974L769.7274962578927 456.24214024011644 934.0949775493557 494.18936332574134z' fill='rgba(0%2c 113%2c 217%2c 0.05)' class='triangle-float3'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1068'%3e%3crect width='1000' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3cstyle%3e %40keyframes float1 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-10px%2c 0)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float1 %7b animation: float1 5s infinite%3b %7d %40keyframes float2 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-5px%2c -5px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float2 %7b animation: float2 4s infinite%3b %7d %40keyframes float3 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(0%2c -10px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float3 %7b animation: float3 6s infinite%3b %7d %3c/style%3e%3c/defs%3e%3c/svg%3e");
background-size: cover;
background-image 本质上是这样的，注意末尾的<style/> 标签：
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" version="1.1" preserveAspectRatio="none" viewBox="0 0 1000 560">
<g mask="url("#SvgjsMask1068")" fill="none">
<path d="M33.92140997279915 576.3200414218256L135.6146172499762 474.62683414464857 33.92140997279912 372.9336268674715-67.77179730437794 474.62683414464857z" fill="rgba(0, 113, 217, 0.05)" class="triangle-float3"/>
<path d="M684.992,535.357C731.366,534.81,771.376,503.967,792.577,462.72C812.066,424.804,805.582,380.198,783.484,343.741C762.268,308.74,725.908,284.205,684.992,285.23C645.618,286.216,615.5,315.03,594.69,348.469C572.255,384.519,554.45,427.076,572.923,465.308C593.465,507.821,637.779,535.913,684.992,535.357" fill="rgba(0, 113, 217, 0.06)" class="triangle-float3"/>
<path d="M655.352,216.654C699.12,214.919,738.519,192.137,761.091,154.599C784.424,115.794,790.735,67.665,768.736,28.088C746.161,-12.526,701.819,-35.515,655.352,-35.631C608.678,-35.747,565.265,-12.342,540.988,27.522C515.668,69.099,508.831,121.946,534.02,163.602C558.5,204.086,608.079,218.528,655.352,216.654" fill="rgba(0, 113, 217, 0.05)" class="triangle-float2"/>
<path d="M746.0565729747942 297.6892313956009L764.2532381400358 204.07550454249028 670.6395112869252 185.8788393772487 652.4428461216836 279.49256623035933z" fill="rgba(0, 113, 217, 0.08)" class="triangle-float3"/>
<path d="M720.044,80.366C743.919,81.1,770.685,79.529,783.525,59.387C797.048,38.174,791.048,10.788,778.175,-10.826C765.639,-31.875,744.533,-46.515,720.044,-47.202C694.315,-47.924,668.46,-36.762,655.976,-14.253C643.796,7.706,648.9,34.889,662.979,55.682C675.433,74.075,697.841,79.684,720.044,80.366" fill="rgba(0, 113, 217, 0.05)" class="triangle-float1"/>
<path d="M239.2,559.944C274.52,560.667,309.214,545.166,327.134,514.722C345.295,483.868,342.217,445.812,324.789,414.538C306.846,382.339,276.061,357.057,239.2,356.923C202.141,356.789,169.903,381.179,152.528,413.913C136.205,444.665,139.518,481.306,157.287,511.245C174.664,540.523,205.161,559.247,239.2,559.944" fill="rgba(0, 113, 217, 0.04)" class="triangle-float3"/>
<path d="M870.8848484464366 393.0320111371974L769.7274962578927 456.24214024011644 934.0949775493557 494.18936332574134z" fill="rgba(0, 113, 217, 0.05)" class="triangle-float3"/>
</g>
<defs>
<mask id="SvgjsMask1068">
<rect fill="white"/>
</mask>
<style> @keyframes float1 0%transform: translate(0, 0) 50%transform: translate(-10px, 0) 100%transform: translate(0, 0) .triangle-float1 animation: float1 5s infinite; @keyframes float2 0%transform: translate(0, 0) 50%transform: translate(-5px, -5px) 100%transform: translate(0, 0) .triangle-float2 animation: float2 4s infinite; @keyframes float3 0%transform: translate(0, 0) 50%transform: translate(0, -10px) 100%transform: translate(0, 0) .triangle-float3 animation: float3 6s infinite; </style>
</defs>
</svg>
我的tailwind.config.js 相当简单：
module.exports =
purge: ['./src/**/*.js,jsx,ts,tsx'],
darkMode: 'media',
theme:
extend: ,
,
variants:
extend: ,
,
plugins: [],
;
就像postcss.config.js：
module.exports =
plugins:
tailwindcss: ,
autoprefixer: ,
,
;
我在gatsby-config.js 中启用了一堆插件：
module.exports =
...
plugins: [
"gatsby-plugin-postcss",
"gatsby-plugin-image",
"gatsby-plugin-sharp",
"gatsby-transformer-sharp",
"gatsby-plugin-mdx",
]
当我执行npm run build / gatsby build 时，来自<style/> 标记的动画会丢失。
.animate-bg-blue-edges 选择器在构建时的输出是
.animate-bg-blue-edges
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1000' height='560' preserveAspectRatio='none' viewBox='0 0 1000 560'%3E%3Cg fill='none' mask='url(%26quot;%23SvgjsMask1068%26quot;)'%3E%3Cpath fill='rgba(0, 113, 217, 0.05)' d='m33.921 576.32 101.694-101.693L33.92 372.934-67.772 474.627z' class='prefix__triangle-float3'/%3E%3Cpath fill='rgba(0, 113, 217, 0.06)' d='M684.992 535.357c46.374-.547 86.384-31.39 107.585-72.637 19.489-37.916 13.005-82.522-9.093-118.979-21.216-35.001-57.576-59.536-98.492-58.511-39.374.986-69.492 29.8-90.302 63.239-22.435 36.05-40.24 78.607-21.767 116.839 20.542 42.513 64.856 70.605 112.069 70.049' class='prefix__triangle-float3'/%3E%3Cpath fill='rgba(0, 113, 217, 0.05)' d='M655.352 216.654c43.768-1.735 83.167-24.517 105.739-62.055 23.333-38.805 29.644-86.934 7.645-126.511-22.575-40.614-66.917-63.603-113.384-63.719-46.674-.116-90.087 23.289-114.364 63.153-25.32 41.577-32.157 94.424-6.968 136.08 24.48 40.484 74.059 54.926 121.332 53.052' style='animation:float2 4s infinite'/%3E%3Cpath fill='rgba(0, 113, 217, 0.08)' d='m746.057 297.69 18.196-93.614-93.613-18.197-18.197 93.614z' class='prefix__triangle-float3'/%3E%3Cpath fill='rgba(0, 113, 217, 0.05)' d='M720.044 80.366c23.875.734 50.641-.837 63.481-20.979 13.523-21.213 7.523-48.599-5.35-70.213-12.536-21.049-33.642-35.689-58.131-36.376-25.729-.722-51.584 10.44-64.068 32.949-12.18 21.959-7.076 49.142 7.003 69.935 12.454 18.393 34.862 24.002 57.065 24.684' style='animation:float1 5s infinite'/%3E%3Cpath fill='rgba(0, 113, 217, 0.04)' d='M239.2 559.944c35.32.723 70.014-14.778 87.934-45.222 18.161-30.854 15.083-68.91-2.345-100.184-17.943-32.199-48.728-57.481-85.589-57.615-37.059-.134-69.297 24.256-86.672 56.99-16.323 30.752-13.01 67.393 4.759 97.332 17.377 29.278 47.874 48.002 81.913 48.699' class='prefix__triangle-float3'/%3E%3Cpath fill='rgba(0, 113, 217, 0.05)' d='m870.885 393.032-101.158 63.21 164.368 37.947z' class='prefix__triangle-float3'/%3E%3C/g%3E%3Cdefs%3E%3Cmask id='prefix__SvgjsMask1068'%3E%3Crect width='1000' height='560' fill='%23fff'/%3E%3C/mask%3E%3C/defs%3E%3C/svg%3E")'%3E%3Cpath fill='rgba(0, 113, 217, 0.05)' d='m33.921 576.32 101.694-101.693L33.92 372.934-67.772 474.627z' class='prefix__triangle-float3'/%3E%3Cpath fill='rgba(0, 113, 217, 0.06)' d='M684.992 535.357c46.374-.547 86.384-31.39 107.585-72.637 19.489-37.916 13.005-82.522-9.093-118.979-21.216-35.001-57.576-59.536-98.492-58.511-39.374.986-69.492 29.8-90.302 63.239-22.435 36.05-40.24 78.607-21.767 116.839 20.542 42.513 64.856 70.605 112.069 70.049' class='prefix__triangle-float3'/%3E%3Cpath fill='rgba(0, 113, 217, 0.05)' d='M655.352 216.654c43.768-1.735 83.167-24.517 105.739-62.055 23.333-38.805 29.644-86.934 7.645-126.511-22.575-40.614-66.917-63.603-113.384-63.719-46.674-.116-90.087 23.289-114.364 63.153-25.32 41.577-32.157 94.424-6.968 136.08 24.48 40.484 74.059 54.926 121.332 53.052' style='animation:float2 4s infinite'/%3E%3Cpath fill='rgba(0, 113, 217, 0.08)' d='m746.057 297.69 18.196-93.614-93.613-18.197-18.197 93.614z' class='prefix__triangle-float3'/%3E%3Cpath fill='rgba(0, 113, 217, 0.05)' d='M720.044 80.366c23.875.734 50.641-.837 63.481-20.979 13.523-21.213 7.523-48.599-5.35-70.213-12.536-21.049-33.642-35.689-58.131-36.376-25.729-.722-51.584 10.44-64.068 32.949-12.18 21.959-7.076 49.142 7.003 69.935 12.454 18.393 34.862 24.002 57.065 24.684' style='animation:float1 5s infinite'/%3E%3Cpath fill='rgba(0, 113, 217, 0.04)' d='M239.2 559.944c35.32.723 70.014-14.778 87.934-45.222 18.161-30.854 15.083-68.91-2.345-100.184-17.943-32.199-48.728-57.481-85.589-57.615-37.059-.134-69.297 24.256-86.672 56.99-16.323 30.752-13.01 67.393 4.759 97.332 17.377 29.278 47.874 48.002 81.913 48.699' class='prefix__triangle-float3'/%3E%3Cpath fill='rgba(0, 113, 217, 0.05)' d='m870.885 393.032-101.158 63.21 164.368 37.947z' class='prefix__triangle-float3'/%3E%3C/g%3E%3Cdefs%3E%3Cmask id='prefix__SvgjsMask1068'%3E%3Crect width='1000' height='560' fill='%23fff'/%3E%3C/mask%3E%3C/defs%3E%3C/svg%3E);
background-size: cover;
它对应于这样的 SVG：
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 1000 560">
<g fill="none" mask="url("#SvgjsMask1068")">
<path fill="rgba(0, 113, 217, 0.05)" d="m33.921 576.32 101.694-101.693L33.92 372.934-67.772 474.627z" class="prefix__triangle-float3"/>
<path fill="rgba(0, 113, 217, 0.06)" d="M684.992 535.357c46.374-.547 86.384-31.39 107.585-72.637 19.489-37.916 13.005-82.522-9.093-118.979-21.216-35.001-57.576-59.536-98.492-58.511-39.374.986-69.492 29.8-90.302 63.239-22.435 36.05-40.24 78.607-21.767 116.839 20.542 42.513 64.856 70.605 112.069 70.049" class="prefix__triangle-float3"/>
<path fill="rgba(0, 113, 217, 0.05)" d="M655.352 216.654c43.768-1.735 83.167-24.517 105.739-62.055 23.333-38.805 29.644-86.934 7.645-126.511-22.575-40.614-66.917-63.603-113.384-63.719-46.674-.116-90.087 23.289-114.364 63.153-25.32 41.577-32.157 94.424-6.968 136.08 24.48 40.484 74.059 54.926 121.332 53.052" style="animation:float2 4s infinite"/>
<path fill="rgba(0, 113, 217, 0.08)" d="m746.057 297.69 18.196-93.614-93.613-18.197-18.197 93.614z" class="prefix__triangle-float3"/>
<path fill="rgba(0, 113, 217, 0.05)" d="M720.044 80.366c23.875.734 50.641-.837 63.481-20.979 13.523-21.213 7.523-48.599-5.35-70.213-12.536-21.049-33.642-35.689-58.131-36.376-25.729-.722-51.584 10.44-64.068 32.949-12.18 21.959-7.076 49.142 7.003 69.935 12.454 18.393 34.862 24.002 57.065 24.684" style="animation:float1 5s infinite"/>
<path fill="rgba(0, 113, 217, 0.04)" d="M239.2 559.944c35.32.723 70.014-14.778 87.934-45.222 18.161-30.854 15.083-68.91-2.345-100.184-17.943-32.199-48.728-57.481-85.589-57.615-37.059-.134-69.297 24.256-86.672 56.99-16.323 30.752-13.01 67.393 4.759 97.332 17.377 29.278 47.874 48.002 81.913 48.699" class="prefix__triangle-float3"/>
<path fill="rgba(0, 113, 217, 0.05)" d="m870.885 393.032-101.158 63.21 164.368 37.947z" class="prefix__triangle-float3"/>
</g>
<defs>
<mask id="prefix__SvgjsMask1068">
<rect fill="#fff"/>
</mask>
</defs>
</svg>
现在缺少<style/> 标记。
从上面可以看出，我对 Gatsby、PostCSS 和 Tailwind 还是很陌生。
【问题讨论】：
【参考方案1】：使用 svgr 插件。盖茨比是https://www.gatsbyjs.com/plugins/gatsby-plugin-svgr/
打开 svgo。尝试不同的 svgo 插件配置：https://nicedoc.io/svg/svgo
禁用inlineStyles 您的问题可能会得到解决
module.exports =
plugins: [
resolve: 'gatsby-plugin-svgr',
options:
svgo: true,
svgoConfig:
plugins: [
prefixIds: true ,
inlineStyles: false
],
,
,
,
],
【讨论】：
是的。这行得通，谢谢。我还不得不取消使用gatsby-plugin-react-svg 将 SVG 内联为反应组件，因为这两个插件似乎发生冲突，gatsby-plugin-svgr 似乎也适用于该工作。以上是关于Webpack 从我的样式表中的内联 SVG 中去除标签，我不知道为啥的主要内容，如果未能解决你的问题，请参考以下文章
如何使用内联 带有webpack的React应用程序中的标签
外部样式表中带有 fill:url(#id) 样式的 Firefox SVG，内联样式很好