原创投稿
  1. 创想鸟首页
  2. 用户投稿

如何用css fill和stroke控制SVG颜色

程序猿 • • 用户投稿

fill和stroke是控制SVG颜色的关键属性，fill负责图形内部填充，stroke定义轮廓颜色与样式，二者结合CSS可实现动态变色、主题切换及交互效果，提升图标灵活性与可维护性。

如何用css fill和stroke控制svg颜色

在使用 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 Fireflies.ai

自动化会议记录和笔记工具，可以帮助你的团队记录、转录、搜索和分析语音对话。

Fireflies.ai 145 查看详情 Fireflies.ai

在 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

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
0 0

关于作者

程序猿的头像

程序猿签约作者

413.8K 文章
0 评论
2 粉丝
这个人很懒，什么都没有留下～
高考生涌入小米之家买手机：小米14系列最受欢迎 销量占比50%
上一篇 2025年12月2日 05:35:35
uc浏览器如何清除Cookie uc浏览器网站Cookie数据管理方法
下一篇 2025年12月2日 05:35:39

相关推荐

发表回复

登录后才能评论
关注微信