正如已经评论过的，您的 Tailwind CSS 类和其他 CSS 在这里没有任何效果，因为 您无法通过
imga) 不要嵌入带有
img标签的 SVG
svg标签一起直接嵌入 HTML 中
✔️最简单的❌ SVG 不可重用（每个 HTML 文件最多可重用
通过实现此）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-900">
<svg class="w-7 h-7 fill-white hover:fill-red-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" alt="facebook logo">
<path
d="M18.896 0H1.104C.494 0 0 .494 0 1.104v17.793C0 19.506.494 20 1.104 20h9.58v-7.745H8.076V9.237h2.606V7.01c0-2.583 1.578-3.99 3.883-3.99 1.104 0 2.052.082 2.329.119v2.7h-1.598c-1.254 0-1.496.597-1.496 1.47v1.928h2.989l-.39 3.018h-2.6V20h5.098c.608 0 1.102-.494 1.102-1.104V1.104C20 .494 19.506 0 18.896 0z" />
</svg>
</body>
</html>
img标签转换为
svg标签
✔️ 除了添加“img-svg”类用到受影响的
img标签之外，无需进行任何更改❌ 不如 a) 那样高效和性能，因为客户端在网页已经交付之后使用
JavaScript Fetch API 来请求原始 SVG 文件
img
类标记所有显示 SVG 的
svg-img标签，并使用 JavaScript 将它们转换为
svg标签，这些标签可以通过您的 (Tailwind) CSS 设置样式。
提示：在本地测试时，您应该安装 VSCode“Live Server”扩展，然后单击底部栏中的“Go Live”符号以提供本地开发服务器上工作目录中的文件。否则 fetch()
将导致 CORS 错误：
Access to fetch at 'file:///.../icon-facebook.svg' from origin 'null' has been blocked by CORS policy: ...。
index.html
文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="transform-svg-imgs.js"></script>
</head>
<body class="bg-slate-900">
<img src="icon-facebook.svg" alt="facebook logo" class="w-7 h-7 fill-white hover:fill-red-400 img-svg">
<!-- the `transform-svg-imgs.js` script will transform above `img` element in below `svg` element
<svg class="w-7 h-7 fill-white hover:fill-red-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" alt="facebook logo">
<path
d="M18.896 0H1.104C.494 0 0 .494 0 1.104v17.793C0 19.506.494 20 1.104 20h9.58v-7.745H8.076V9.237h2.606V7.01c0-2.583 1.578-3.99 3.883-3.99 1.104 0 2.052.082 2.329.119v2.7h-1.598c-1.254 0-1.496.597-1.496 1.47v1.928h2.989l-.39 3.018h-2.6V20h5.098c.608 0 1.102-.494 1.102-1.104V1.104C20 .494 19.506 0 18.896 0z" />
</svg> -->
</body>
</html>
transform-svg-imgs.js
文件：
window.onload = () => {
// Find all <img> elements with the class "img-svg"
const imgSVGs = document.querySelectorAll("img.img-svg");
// Loop through each <img> element
imgSVGs.forEach((img) => {
// Fetch the SVG file
fetch(img.getAttribute("src"))
.then(response => response.text())
.then(svgContent => {
// Parse the XML data from the SVG file into a DOM object for easier evaluation
const parser = new DOMParser();
const svgXML = parser.parseFromString(svgContent, 'text/xml');
// Create a new <svg> element
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
// Copy attributes from <img> to <svg> and remove the "img-svg" marker
svg.setAttribute("class", img.getAttribute("class"));
svg.classList.remove("img-svg");
svg.setAttribute("alt", img.getAttribute("alt"));
// Copy data from SVG file to <svg> element
svg.setAttribute("viewBox", svgXML.getElementsByTagName("svg")[0].getAttribute("viewBox"));
const path = svgXML.getElementsByTagName("svg")[0].querySelector("path");
svg.appendChild(path);
// Replace <img> with <svg>
img.parentNode.replaceChild(svg, img);
})
.catch(error => { console.log("Error fetching SVG: ", error); });
});
};
icon-facebook.svg
文件：
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M18.896 0H1.104C.494 0 0 .494 0 1.104v17.793C0 19.506.494 20 1.104 20h9.58v-7.745H8.076V9.237h2.606V7.01c0-2.583 1.578-3.99 3.883-3.99 1.104 0 2.052.082 2.329.119v2.7h-1.598c-1.254 0-1.496.597-1.496 1.47v1.928h2.989l-.39 3.018h-2.6V20h5.098c.608 0 1.102-.494 1.102-1.104V1.104C20 .494 19.506 0 18.896 0z"/>
</svg>
viewBox="0 0 20 20"。SVG 文件中的
width="20"height="20"我删除了它们。同样适用于 HTML 中定义的
width="20"height="20"w-7 h-7我也删除了它们。