使用CSS fill属性可控制SVG图形填充颜色，适用于circle、rect等闭合形状。通过内联style设置fill可直接生效，如style=”fill: blue”使圆形变蓝；推荐使用CSS类定义fill颜色，如.icon-fill { fill: red }，便于复用。可在外部或内部样式表中通过选择器统一设置，如svg .primary { fill: #ff6b6b }。结合伪类可实现交互效果，如:hover时fill变为紫色，并添加transition实现平滑过渡。需注意内联样式和!important可能覆盖CSS规则，导致样式不生效。
使用CSS fill 属性可以轻松控制SVG图形的填充颜色。这个属性适用于所有闭合路径和形状，比如 、、 以及 等元素。
直接在SVG内联样式中设置fill
你可以在SVG标签内部直接使用 style 属性来设置 fill 颜色。
这样圆形就会被蓝色填充。
通过CSS类设置fill颜色
更推荐的方式是使用CSS类，便于复用和维护。
立即学习“前端免费学习笔记（深入）”；
然后在CSS中定义：
.icon-fill {
fill: red;
}
这样所有应用该类的SVG形状都会使用红色填充。
Reclaim.ai
为优先事项创建完美的时间表
90 查看详情 
在外部或内部样式表中控制fill
你也可以通过选择器对特定SVG元素统一设置填充色。
svg .primary {
fill: #ff6b6b;
}
svg .secondary {
fill: #aaa;
}
对应的SVG：
动态更改fill颜色（例如悬停效果）
利用CSS伪类可以实现交互效果。
.interactive-icon {
fill: black;
transition: fill 0.3s ease;
}
.interactive-icon:hover {
fill: purple;
}
当鼠标悬停时，图标会平滑地变为紫色。
基本上就这些。fill属性非常直观，关键是确保目标SVG元素没有内联的 fill 覆盖了你的CSS规则。如果遇到样式不生效，检查是否有 !important 或内联样式优先级更高。
以上就是如何通过css fill属性设置SVG填充颜色的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1045269.html
微信扫一扫 
支付宝扫一扫 
