1. 为什么要在CSS里折腾SVG
很多人第一次接触SVG，都是把它当成一张图片来用——<img src="xxx.svg">，或者直接内联到HTML里，然后就不管了。等到产品经理跑过来说“这个图标鼠标悬停的时候要变个颜色”“这个加载动画要转起来”“这个按钮点击后图标要有个缩放反馈”，才开始挠头：SVG不是矢量图吗，怎么改？
我见过太多项目里，一个图标为了做hover变色，硬生生切了两套图，一套灰色一套高亮，用JS监听鼠标事件来回切换src。这种做法在图标数量少的时候还能忍，一旦图标上了几十个，维护成本直接爆炸——设计师改个颜色，你得重新导出所有状态图，改一次骂一次。
CSS控制SVG的核心价值就在这里：让矢量图形像普通DOM元素一样被样式系统管理。颜色、尺寸、旋转、描边、填充、动画，全部交给CSS，不用重新导出文件，不用写额外的JS逻辑。你改一个CSS变量，全站所有用到这个图标的地方同步生效。
但这里有个关键前提：SVG必须以inline方式嵌入HTML，也就是直接把<svg>标签写在页面里，而不是通过<img>引用。原因很简单——<img>引入的SVG是一个独立的文档上下文，外部CSS无法穿透进去操作里面的<path>、<circle>这些元素。只有inline SVG，它的内部结构才暴露在页面的DOM树里，CSS选择器才能命中。
这个区别是后面所有操作的基础，先记住这一条，我们再往下拆。
2. 先搞清楚SVG里哪些属性归CSS管
在动手写样式之前，得先弄明白一件事：SVG元素的属性分两类，一类是表现属性（presentation attributes），一类是几何属性。这两类东西CSS的掌控力完全不同，搞混了就会写出“为什么我的CSS不生效”的代码。
2.1 表现属性：CSS可以完全接管
表现属性指的是那些描述“长什么样”的属性，比如：
fill：填充颜色stroke：描边颜色stroke-width：描边宽度stroke-dasharray：虚线样式stroke-dashoffset：虚线偏移opacity：透明度fill-opacity、stroke-opacity：填充和描边的独立透明度
这些属性有个特点：它们既是SVG标签上的属性，也是CSS属性。也就是说，你可以写<path fill="red">，也可以写.icon path { fill: red; }，两者效果一样。而且CSS的优先级更高——如果标签上写了fill="red"，CSS里写了fill: blue，最终显示蓝色。
这个特性非常有用。实际项目里我通常的做法是：SVG文件里不写死任何颜色，全部用fill="currentColor"或者干脆不写，把颜色控制权完全交给CSS。这样同一个图标文件可以在不同场景下呈现不同颜色，真正做到“一份资源，多处复用”。
提示：
currentColor是一个特别好用的值，它会让填充色自动继承父元素的color属性。你给按钮设了color: #333，里面的图标自动就是深灰色；hover时color变成主题色，图标跟着变。一行CSS搞定，不需要单独写图标样式。
2.2 几何属性：CSS管不了，得用别的手段
几何属性指的是描述“在哪里、多大”的属性，比如：
x、y：元素位置cx、cy：圆心坐标r：半径width、height：宽高d：路径数据（这个最特殊，后面单独说）viewBox：视口范围
这些属性不能通过CSS直接修改。你写.icon circle { r: 10; }是无效的，浏览器根本不认。想改这些值，要么改HTML里的属性，要么用JS操作，要么用CSS的transform做视觉上的变换。
这里要区分一个容易混淆的点：width和height在SVG的<svg>根元素上是可以被CSS控制的（因为<svg>本身也是一个替换元素，遵循CSS盒模型），但内部子元素的width、height、x、y这些就不行。
所以如果你想让一个圆变大，正确做法不是改r，而是用transform: scale(1.2)。虽然视觉上看起来一样，但实现路径完全不同。
2.3d属性：路径数据的特殊处理
d属性是<path>元素的核心，它定义了路径的形状。这个属性CSS完全无法修改——你不能在CSS里写d: "M0 0 L10 10"。
那如果我想做路径变形动画怎么办？答案是用CSS的d属性动画（部分浏览器支持）或者用stroke-dasharray和stroke-dashoffset做描边动画。后者是更通用的方案，后面会详细讲。
3. 用CSS变量打通SVG的配色系统
前面说了currentColor的用法，但实际项目里往往更复杂——一个图标可能有多个部分，需要不同的颜色。比如一个“通知”图标，铃铛主体是一个颜色，上面的小红点又是另一个颜色。这时候currentColor就不够用了。
3.1 CSS自定义属性的注入方式
解决方案是CSS自定义属性（CSS Variables）。SVG元素可以读取页面上定义的CSS变量，用法和普通元素完全一样。
具体操作是这样的：在SVG文件里，把需要动态控制的颜色写成var(--xxx)的形式：
<svg viewBox="0 0 24 24"> <path d="..." fill="var(--icon-primary, #333)" /> <circle cx="18" cy="6" r="3" fill="var(--icon-accent, #f00)" /> </svg>然后在CSS里定义这些变量：
.notification-icon { --icon-primary: #555; --icon-accent: #e74c3c; } .notification-icon:hover { --icon-primary: #333; --icon-accent: #c0392b; }这样图标就有了两套配色，hover时整体变深。而且因为变量是定义在父元素上的，你可以给不同容器设置不同的变量值，同一个SVG文件在不同位置呈现不同配色。
3.2 变量回退值的写法与坑
上面代码里var(--icon-primary, #333)的第二个参数是回退值——当变量未定义时使用。这个回退值在实际项目中非常重要，因为SVG可能被用在没有定义变量的地方，没有回退值就会导致颜色变成默认的黑色或者透明。
我踩过的一个坑是：回退值里不能有逗号。比如var(--color, rgba(0,0,0,0.5))这种写法，浏览器解析时会出问题，因为var()函数用逗号分隔变量名和回退值，rgba里的逗号会被误认为是分隔符。解决办法是用一个中间变量，或者直接用十六进制颜色。
另一个坑是变量的继承链。CSS变量是继承的，如果你在body上定义了--icon-color，所有SVG都会读到这个值。但如果你在某个容器上重新定义了同名变量，那个容器里的SVG就会用新值。这个特性可以用来做局部主题切换，但也要小心变量污染——给一个无关的父元素设了变量，结果影响了里面所有图标。
3.3 多主题切换的实战方案
基于CSS变量，可以很优雅地实现多主题切换。思路是：把所有图标的颜色变量集中定义在:root或者主题类上，切换主题时只改变量值。
:root { --icon-default: #666; --icon-hover: #1a73e8; --icon-active: #0d47a1; } .theme-dark { --icon-default: #aaa; --icon-hover: #64b5f6; --icon-active: #90caf9; }SVG里统一用var(--icon-default)这类变量。切换主题时给<html>或<body>加一个.theme-dark类，所有图标颜色自动切换，不需要动任何SVG代码。
这个方案的好处是关注点分离：设计师维护SVG的形状，开发者维护CSS变量表，两边互不干扰。新增一个主题只需要加一组变量定义，不用碰任何图标文件。
4. 描边动画：让SVG线条“画”出来
描边动画是SVG在CSS控制下最出彩的应用之一。效果就是线条像被一支笔慢慢画出来一样，从无到有逐渐显现。这个效果在加载动画、图标入场、进度指示等场景里非常常见。
4.1stroke-dasharray和stroke-dashoffset的原理
这两个属性是描边动画的核心，理解它们的关键是把描边想象成一条实线，然后用虚线的方式去“遮住”一部分。
stroke-dasharray：定义虚线的“实线段长度”和“空白段长度”。比如stroke-dasharray: 10 5表示10像素实线、5像素空白，循环往复。stroke-dashoffset：定义虚线从哪里开始偏移。正值让虚线整体向前移动，负值向后。
如果我把stroke-dasharray设成一个大于等于路径总长度的值，比如路径长100，我设stroke-dasharray: 100，那么整条路径就是一段100像素的实线，没有空白。然后我把stroke-dashoffset设为100，这段实线就被“推”出了可视区域，路径看起来是空的。
动画的过程就是：stroke-dashoffset从100逐渐变到0，实线段从路径末端慢慢“滑”回来，视觉上就是线条被画出来的效果。
4.2 路径长度的获取方式
这里有个关键问题：路径总长度怎么知道？不同图标的路径长度不一样，写死一个值肯定不行。
最可靠的方式是用JS的getTotalLength()方法：
const path = document.querySelector('.icon path'); const length = path.getTotalLength(); path.style.strokeDasharray = length; path.style.strokeDashoffset = length;拿到长度后设置初始状态，然后通过CSS类触发动画：
.icon path { transition: stroke-dashoffset 1s ease; } .icon.animate path { stroke-dashoffset: 0; }如果不想用JS，也有纯CSS的方案：把stroke-dasharray设成一个足够大的值，比如1000，只要它大于路径实际长度就行。stroke-dashoffset也从1000开始。这样虽然动画的“有效区间”只占整个过渡的一小部分，但视觉上仍然能看到线条画出来的效果，只是速度曲线会有点不一样。
注意：纯CSS方案下，如果路径长度远小于1000，动画的前90%时间看起来什么都没发生，最后10%才快速画完。所以要么用JS精确计算，要么把
dasharray设得接近实际长度（可以凭经验估一个值，比如大多数24x24图标的路径长度在50到150之间）。
4.3 多段路径的错峰动画
一个图标往往由多条路径组成，如果所有路径同时画出来，效果会比较单调。更好的做法是让它们错峰出现，一条接一条地画。
实现方式是用transition-delay或者animation-delay给每条路径设置不同的延迟：
.icon path:nth-child(1) { transition-delay: 0s; } .icon path:nth-child(2) { transition-delay: 0.2s; } .icon path:nth-child(3) { transition-delay: 0.4s; }配合前面的stroke-dashoffset动画，就能做出“一笔一笔画出来”的效果。延迟的间隔一般设在0.1到0.3秒之间，太短了看不出错峰，太长了用户等得不耐烦。
实际项目中我通常会把延迟值也做成CSS变量，方便统一调整：
.icon { --stagger: 0.15s; } .icon path:nth-child(1) { transition-delay: calc(var(--stagger) * 0); } .icon path:nth-child(2) { transition-delay: calc(var(--stagger) * 1); } .icon path:nth-child(3) { transition-delay: calc(var(--stagger) * 2); }这样改一个变量就能调整整体节奏，不用逐个改延迟值。
5. 变换与过渡：让SVG动起来的正确姿势
SVG元素的变换和普通HTML元素有个重要区别：SVG的transform原点默认在SVG画布的左上角（0,0），而不是元素自身的中心。这个差异导致很多人写旋转动画时，图标是绕着画布角落转的，而不是绕自己中心转。
5.1transform-origin在SVG里的特殊行为
在普通HTML里，transform-origin默认是元素中心（50% 50%）。但在SVG里，默认是0 0，也就是SVG视口的左上角。
要让一个SVG元素绕自身中心旋转，必须显式设置transform-origin：
.icon .gear { transform-origin: center; transition: transform 0.5s ease; } .icon:hover .gear { transform: rotate(180deg); }transform-origin: center在大多数现代浏览器里对SVG元素有效，它会自动计算元素的包围盒中心。但在一些老版本浏览器里，可能需要用具体坐标值，比如transform-origin: 12px 12px（假设图标是24x24，中心在12,12）。
另一个坑是：transform-box属性。这个属性决定了transform-origin的参考框是什么。默认值是view-box，也就是以SVG视口为参考。如果你想让transform-origin以元素自身为参考，需要设transform-box: fill-box。
.icon .gear { transform-box: fill-box; transform-origin: center; }fill-box表示以元素的填充区域为参考框，这样center就是元素自己的中心。这个设置在Chrome、Firefox、Safari的较新版本里都支持，是目前最可靠的写法。
5.2 缩放动画的视觉补偿
用transform: scale()缩放SVG元素时，有个视觉上的问题：描边宽度也会跟着缩放。一个stroke-width: 2的线条，放大1.5倍后视觉上变成了3，看起来会变粗。
如果这不是你想要的效果，有两个解决方案：
一是用vector-effect: non-scaling-stroke，这个属性让描边宽度不受变换影响，始终保持设定的值：
.icon path { vector-effect: non-scaling-stroke; }二是缩放时同步调整stroke-width，用CSS变量或者calc()计算：
.icon:hover path { transform: scale(1.2); stroke-width: calc(2 / 1.2); }第一种方案更简洁，但要注意non-scaling-stroke在某些复杂变换下可能有性能开销。第二种方案更可控，但需要手动维护计算关系。
5.3 过渡与动画的性能考量
SVG的transform和opacity动画在现代浏览器里是可以走GPU加速的，性能很好。但fill、stroke、stroke-width这些属性的动画会触发重绘，性能差一些。
如果要做复杂的颜色过渡动画，建议用opacity叠加的方式，而不是直接动画fill。比如准备两层相同形状的路径，一层红色一层蓝色，通过控制opacity来切换颜色。这样动画的是opacity，走GPU合成，流畅度更高。
不过对于大多数图标交互（hover变色、点击反馈），直接动画fill的性能完全够用，不需要过度优化。只有在大量图标同时做复杂动画的场景下，才需要考虑这些细节。
6. 实战中容易踩的几个坑
前面讲的都是“应该怎么做”，这一节说说“实际做的时候会出什么问题”。这些都是我在项目里真实遇到过的，有些坑排查了很久才找到原因。
6.1 图标不显示：viewBox缺失或错误
最常见的问题：SVG写进页面后一片空白。原因通常是<svg>标签缺少viewBox属性，或者viewBox的值和路径坐标不匹配。
viewBox定义了SVG的“视口范围”，格式是viewBox="min-x min-y width height"。如果路径的坐标是M0 0 L24 24，但viewBox写的是0 0 100 100，那路径只占视口的左上角一小块，看起来就像没显示。
排查方法：在浏览器开发者工具里选中<svg>元素，看看它的实际渲染尺寸和viewBox是否匹配。如果viewBox是0 0 24 24，但CSS里给<svg>设了width: 100px; height: 100px，那图标会被放大到100x100，这是正常的。但如果viewBox缺失，浏览器会按默认的0 0 300 150处理，路径位置就全乱了。
6.2 CSS选择器命中失败：命名空间问题
用CSS选择器选SVG内部元素时，有时候会发现选择器“不生效”。比如.icon path { fill: red; }，明明DOM里有<path>，但颜色就是不变。
这种情况通常是因为SVG元素有命名空间。在HTML里内联的SVG，浏览器会自动处理命名空间，CSS选择器一般能正常工作。但如果SVG是通过innerHTML动态插入的，或者从外部文件加载后注入的，可能会出现命名空间不匹配的问题。
解决办法是用querySelector时加上命名空间，或者在插入SVG时确保它被正确解析为SVG元素而不是HTML元素。最稳妥的方式是用document.createElementNS('http://www.w3.org/2000/svg', 'svg')来创建SVG元素。
6.3 动画不触发：transition写在了错误的位置
CSS过渡动画不生效，十有八九是transition写错了地方。常见错误是：
.icon:hover { transition: fill 0.3s; fill: red; }这样写，transition只在hover状态下存在，鼠标移入的瞬间过渡才生效，但移出时transition已经没了，颜色会瞬间跳回。正确写法是把transition写在基础状态上：
.icon { transition: fill 0.3s; } .icon:hover { fill: red; }这样进入和离开都有过渡效果。这个坑在普通CSS里也存在，但SVG场景下因为涉及多个属性（fill、stroke、transform），更容易漏写。
6.4 描边动画的“回弹”问题
用stroke-dashoffset做描边动画时，如果动画结束后把stroke-dashoffset设回初始值，线条会“倒着画回去”。这在某些场景下是想要的效果（比如循环加载动画），但如果是入场动画，通常希望线条画完后保持显示。
解决办法是动画结束后保持stroke-dashoffset: 0，不要重置。如果需要重新播放动画，通过移除再添加类名的方式触发：
element.classList.remove('animate'); void element.offsetWidth; // 强制重排 element.classList.add('animate');void element.offsetWidth这行看起来很奇怪，但它是触发浏览器重排的常用技巧，让remove和add之间产生一个“间隙”，动画才能重新开始。
7. 一套可复用的SVG图标样式方案
讲了这么多原理和坑，最后给一套我在多个项目里用过的SVG图标样式方案。这套方案的核心思路是：用CSS变量控制颜色，用类名控制状态，用currentColor做默认回退。
7.1 基础样式定义
/* 所有内联SVG的默认行为 */ svg.icon { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; fill: currentColor; overflow: visible; } /* 描边类图标 */ svg.icon-stroke { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }width: 1em; height: 1em让图标尺寸跟随字号，这样在文字旁边使用时能自动对齐。vertical-align: -0.125em是一个微调值，让图标在行内和文字基线对齐得更自然。
overflow: visible是为了防止某些描边较粗的图标被SVG视口裁切。默认情况下SVG会裁切超出viewBox的内容，设成visible可以避免这个问题。
7.2 交互状态的处理
/* 可点击图标的交互反馈 */ .icon-interactive { cursor: pointer; transition: transform 0.2s ease, color 0.2s ease; } .icon-interactive:hover { transform: scale(1.1); } .icon-interactive:active { transform: scale(0.95); } /* 旋转动画 */ .icon-spin { animation: icon-spin 1s linear infinite; } @keyframes icon-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }scale(1.1)和scale(0.95)的差值制造了“按下”的物理感。旋转动画用linear而不是ease，因为匀速旋转看起来更自然，有节奏变化的旋转会显得卡顿。
7.3 尺寸变体
.icon-sm { font-size: 14px; } .icon-md { font-size: 18px; } .icon-lg { font-size: 24px; } .icon-xl { font-size: 32px; }因为图标尺寸用的是em，所以只需要改font-size就能整体缩放。这套尺寸变体覆盖了大多数场景，需要更大或更小的时候直接写style="font-size: 48px"就行。
7.4 在组件中的使用示例
<button class="btn"> <svg class="icon icon-stroke" viewBox="0 0 24 24"> <path d="M12 5v14M5 12h14" /> </svg> 添加 </button>.btn { display: inline-flex; align-items: center; gap: 6px; color: #333; transition: color 0.2s; } .btn:hover { color: #1a73e8; }按钮hover时color变化，图标因为stroke: currentColor自动跟着变蓝。整个交互不需要任何JS，也不需要为图标单独写hover样式。
这套方案我在实际项目里用了两年多，覆盖了按钮图标、导航图标、状态指示图标、加载动画等场景。核心就是把SVG当成普通DOM元素来对待，用CSS的继承、变量、过渡、动画这些机制去控制它，而不是把它当成一个黑盒图片。
最后分享一个我个人的习惯：每次拿到新图标，先检查三件事——viewBox是否正确、颜色是否用了currentColor或CSS变量、路径是否有多余的fill或stroke硬编码。这三件事检查完，后面基本不会出问题。
