使用 Tailwind CSS 更改 SVG 的填充颜色不起作用[重复]

问题描述 投票：0回答：1

我希望 SVG 图标的颜色默认为白色，悬停时变为红色。
但在我当前的代码中，它始终是白色的，并且悬停时不会改变。为什么？

这是我的代码：

index.html 文件：

<img src="images/social/icon-facebook.svg" alt="facebook logo"
    class="w-7 h-7 hover:fill-red-400">

icon-facebook.svg 文件：

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">
    <path fill="#FFF" 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>

我还注意到，使用 

img
标签上的 Tailwind CSS 类定义白色默认颜色而不是使用 SVG 文件中的 
fill
属性也不起作用 - 图标将只是黑色。
为什么我的 Tailwind CSS 类在这里没有任何效果？

index.html 文件：

<img src="images/social/icon-facebook.svg" alt="facebook logo"
    class="w-7 h-7 fill-white hover:fill-red-400">

icon-facebook.svg 文件：

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="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>
html css svg tailwind-css fill
1个回答
1
投票

您面临的问题不是Tailwind特有的。如果你编写普通的 CSS，如下所示...

img:hover {
    fill: #f87171; 
}

...这也行不通。

这里的问题在于（正如 @CBroe 已经评论过的那样），你无法使用 CSS

 通过
img 标签嵌入的 SVG 样式（正如你可以在 this 或 this 中阅读的那样）文章）。

解决方案

我在此答案中详细列出了几种方法。简而言之：

    请勿使用
  • img
     标签嵌入 SVG，而应使用
    svg
     标签（
    推荐）
    • 或使用脚本将这些
  • img
     标签转换为
    svg
     标签（
    不推荐）
    • 或使用其他解决方法，例如
  • masks
    、
    filters
     或
    background-image
     属性
最简单的解决方案（推荐）

在 HTML 中嵌入带有

svg

 元素的 SVG。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="bg-gray-900"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" alt="facebook logo" class="w-7 h-7 fill-white hover:fill-red-400"> <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>








Tailwind 本身会尽可能这样做，正如您在他们的 主页 或 Tailwind UI 页面 上看到的那样（我没有找到单个 img
 嵌入）。您可以通过右键单击那里的每个图标并选择“检查”来检查这一点。或者短 
Ctrl
 + 
Shift
 + 
C
。



但是，当他们需要从远程源嵌入它并且不关心通过CSS进一步更改样式（https://...
）时，他们会并且必须使用
img
标签，因为
没有src
 
svg
 标签
 支持的属性。例如，他们在Tailwind Components中执行此操作，例如此处的此登陆页面模板。

但在成熟的 
Tailwind 模板（如 this ）中，他们有自定义公司徽标，他们总是坚持将其嵌入为 svg
 元素。




SVG 的改进




    您需要在 SVG 文件上定义 viewBox 属性以使其可缩放 - 没有它，您将无法增加或减少其大小。这就是为什么
  • 我添加了viewBox="0 0 20 20"
    。
    
SVG 文件中的 
    • width="20"
  •  和 
    height="20"
     是不必要的，因为尺寸已经由路径本身和 viewBox 定义 - 设置 
    width
     和 
    height
     只会阻止您缩放它。这就是为什么
    我删除了它们。
    


index.html
 文件：
<img src="icon-facebook.svg" alt="facebook logo"
    class="w-7 h-7 fill-white hover:fill-red-400">



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>


    

      

      
    

  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.