fill和stroke是控制SVG颜色的关键属性，fill负责图形内部填充，stroke定义轮廓颜色与样式，二者结合CSS可实现动态变色、主题切换及交互效果，提升图标灵活性与可维护性。
在使用 SVG 时，fill 和 stroke 是控制图形颜色最关键的两个 CSS 属性。它们分别负责图形的内部填充色和轮廓描边色。通过 CSS 可以灵活地为内联 SVG 或 SVG 图标设置颜色，尤其在响应交互或主题切换时非常实用。
fill：设置图形填充颜色
fill 属性用于定义 SVG 图形内部的颜色。适用于 、、 等封闭图形。
示例：
.my-circle { fill: blue;}
此时圆形会被填充为蓝色。如果未设置 fill，默认是黑色。也可以设为 none 来取消填充：
立即学习“前端免费学习笔记（深入）”；
.my-circle { fill: none;}
stroke：设置描边颜色和宽度
stroke 控制图形轮廓的颜色。单独设置颜色还不够，通常还需指定描边宽度 stroke-width 才能看见效果。
常用属性包括：
stroke：描边颜色 stroke-width：描边粗细（单位可为 px、em 等） stroke-linecap：线条端点样式（如 round、butt） stroke-dasharray：虚线样式
示例：
.dashed-line { stroke: red; stroke-width: 2px; stroke-dasharray: 5, 5;}
这会画出一条红色虚线。
Fireflies.ai
自动化会议记录和笔记工具，可以帮助你的团队记录、转录、搜索和分析语音对话。
145 查看详情
在 CSS 中动态控制 SVG 颜色
将 fill 和 stroke 写在 CSS 中，可以方便地通过类名、伪类或主题变量更改颜色。
比如实现鼠标悬停变色：
.icon-path { fill: currentColor; transition: fill 0.3s ease;}.icon-path:hover { fill: orange;}
这里使用 currentColor 是一个技巧——它会继承父元素的 color 值，适合做图标颜色统一管理。
例如：
此时 fill: currentColor 会让 SVG 跟随文字颜色变为绿色。
注意事项
有些情况下 CSS 无法覆盖行内属性。如果 SVG 元素本身设置了 fill=”black” 这样的内联属性，CSS 的 fill 可能无效。解决方法：
移除 SVG 中的内联 fill/stroke 属性 使用更高级的选择器或加 !important（不推荐长期使用） 在构建流程中处理 SVG，输出适合 CSS 控制的版本
基本上就这些。掌握 fill 和 stroke 的用法，就能自由控制 SVG 的视觉表现，配合 CSS 变量还能轻松实现暗黑模式切换等需求。
以上就是如何用css fill和stroke控制SVG颜色的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1058286.html
微信扫一扫 
支付宝扫一扫 
