html5中svg动态样式切换需内联svg，通过class、伪类、css变量和相邻选择器实现纯css控制。关键包括：添加viewbox和preserveaspectratio、使用:hover/:checked、定义--icon-fill等变量、配合visibility/opacity过渡。
在 HTML5 中，SVG 配合 CSS 实现样式的动态切换，核心在于让 SVG 元素真正“可被 CSS 选中和控制”。这只有在 内联 SVG（即把 SVG XML 代码直接写进 HTML）的前提下才能稳定实现。外部引入（如 <img src="icon.svg">）会使 SVG 成为黑盒，内部结构不可见，CSS 完全失效。
用内联 SVG 打开样式控制通道
把设计工具导出或在线获取的 SVG 源码，去掉冗余的 <?xml>、DOCTYPE 和多余命名空间，保留 <svg></svg> 根标签及内部图形元素（<path></path>、<circle></circle>、<g></g> 等）。关键要加上：
-
viewBox属性（如viewBox="0 0 24 24"），替代固定宽高，确保响应式缩放 -
preserveAspectRatio="xMidYMid meet"，防止拉伸变形 - 为
<svg></svg>添加 class（如class="icon sun-icon"），便于统一控制
用 CSS 类与伪类驱动状态切换
CSS 可直接作用于 SVG 内部元素，无需 JavaScript 就能完成颜色、透明度、旋转、位移等变化：
- 给
<path></path>或<g></g>加 class，例如class="sun-body"，再用.sun-body { fill: currentColor; }继承父级文字色 - 利用
:hover实现悬停变色：.icon:hover .sun-body { fill: #FFD700; } - 用
:checked + .icon或.theme-dark .icon .sun-body配合主题 class 切换图标颜色或隐藏/显示部分路径 - 对
<g></g>应用transform: rotate(45deg)，整组图形同步转动
用 CSS 自定义属性（Variables）统一管理主题色
把颜色、描边粗细等可变样式抽成 CSS 变量，挂载在 :root 下，实现集中切换：
- 在
<style></style>中定义：:root { --icon-fill: #333; --icon-stroke: #666; } - SVG 内部使用：
<path fill="var(--icon-fill)" stroke="var(--icon-stroke)"></path> - 切换主题时只需改
document.documentElement.classList.toggle('theme-dark')，并在 CSS 中重定义变量值 - 注意：transition 不能直接作用于变量名，但可作用于使用该变量的属性，例如
fill: var(--icon-fill); transition: fill 0.3s;
用纯 CSS 实现图标状态切换（如日/月开关）
无需 JS，仅靠隐藏复选框 + 相邻兄弟选择器就能完成动态图标替换：
- HTML 中放一个
<input type="checkbox" id="toggle">和两个 SVG 图标容器（分别带class="sun"和class="moon"） - CSS 中写：
#toggle:checked ~ .sun { visibility: hidden; } #toggle:checked ~ .moon { visibility: visible; } - 点击 checkbox 即触发图标显隐切换，配合
visibility或opacity可加过渡效果
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
