内联SVG结合CSS可灵活控制图标颜色、大小和动画。通过设置fill: currentColor或CSS变量，配合em单位与transition，实现主题适配、响应式布局及悬停动效，提升交互体验且易于维护。
使用CSS来实现简单的SVG图标样式非常直接，关键在于把SVG内联到HTML中，然后通过CSS控制其颜色、大小、动画等视觉效果。下面介绍几种常见且实用的方法。
将SVG代码直接写在HTML中，可以方便地用fill属性配合CSS类来控制图标的颜色。
示例：
<svg class="icon" width="24" height="24" viewBox="0 0 24 24"> <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" /> </svg>
CSS样式：
立即学习“前端免费学习笔记（深入）”；
.icon {
fill: currentColor; /* 使用文字颜色 */
width: 24px;
height: 24px;
}
.icon:hover {
fill: #007acc;
}
说明：使用
currentColor
通过CSS设置SVG的尺寸，避免在HTML中硬编码
width
height
建议使用相对单位如
em
rem
.icon {
width: 1.5em;
height: 1.5em;
vertical-align: middle;
}
这样图标就能自然地与文字对齐，适合用在按钮或导航栏中。
为SVG图标添加平滑的颜色变化或旋转动画，提升交互体验。
.icon {
fill: #666;
transition: fill 0.3s ease, transform 0.3s ease;
}
<p>.icon:hover {
fill: #000;
transform: scale(1.1);
}</p>支持
transform
transition
结合CSS自定义属性，轻松实现多主题切换。
:root {
--icon-color: #555;
--icon-hover: #007acc;
}
<p>.icon {
fill: var(--icon-color);
transition: fill 0.3s;
}</p><p>.icon:hover {
fill: var(--icon-hover);
}</p>只需更改变量值，所有图标颜色自动更新。
基本上就这些。通过内联SVG + CSS，你可以完全控制图标的外观，无需依赖外部图片或字体图标，灵活又高效。关键是确保
fill
currentColor
var()
以上就是如何用css实现简单SVG图标样式的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
924
收藏
