点击缩放变形必须用:active伪类而非:hover，因:hover无法捕获点击瞬时状态；svg需内联、设transform-origin:center、过渡写在默认态，且仅过渡transform以避免抖动。
点击触发缩放变形必须用 :active 伪类，不能只靠 :hover
很多人试了 :hover 发现点下去没反应，是因为点击（tap/click）的瞬时状态需要捕获 :active。SVG 图标默认是内联元素，没有 transform-origin 和 transform 的过渡基础，直接加 scale() 会跳变或偏移。
实操要点：
-
:active必须写在 SVG 元素或其容器上，且要确保该元素可聚焦（比如加tabindex="0"或用button包裹） - 缩放前必须设
transform-origin: center center，否则 SVG 内部坐标系可能让变形中心偏移到左上角 - 过渡属性要写在默认状态（非
:active），否则第一次点击无动画 - 推荐只过渡
transform，避免用all—— SVG 的fill、stroke等属性若参与过渡，可能在部分浏览器中引发重排抖动
transform 缩放 + 变形组合需注意 SVG 坐标系限制
SVG 不像普通 HTML 元素那样天然支持 transform: scale() rotate() skewX() 的自由叠加。它的 transform 属性作用于整个 <svg></svg> 或子元素（如 <path></path>），但缩放中心默认是画布原点（0, 0），不是图形几何中心。所以直接写 scale(0.9) rotate(5deg) 容易导致图标“飞走”。
解决方式：
- 给目标 SVG 子元素（如
<path></path>或<g></g>）显式设置transform-origin: 50% 50%（CSS 层），或用transform-box: fill-box让它以内容盒为基准 - 如果 SVG 是内联的，优先对
<g></g>标签加类并控制，比直接操作<svg></svg>更安全 - 变形动画慎用
skew()或translateZ()：多数 SVG 渲染器不支持 3D transform，translateZ会降级为无效果，skew在细线条图标上易造成锯齿
点击反馈要「快进快出」，持续时间建议 ≤ 0.2s
微交互的核心是即时感。用户点击图标的预期响应时间在 100–200ms 内，超过这个阈值就会觉得“卡”或“没点上”。CSS 动画的 animation-duration 适合循环动效（如加载旋转），但点击缩放这类瞬态反馈，必须用 transition 控制。
推荐配置：
- 默认状态：
transition: transform 0.18s cubic-bezier(0.4, 0.14, 0.3, 1);（模拟轻微弹性回弹） -
:active状态：transform: scale(0.92) rotate(-1.5deg);（微缩+微倾，比纯缩放更显“按压感”） - 别忘了加
will-change: transform到默认状态——对频繁触发的点击动画，能提前触发 GPU 加速，避免 iOS Safari 下偶发掉帧
SVG 内联是前提，外部引用（<img src="icon.svg">）无法用 CSS 控制子元素
这是最容易被忽略的硬性限制：只有把 SVG 代码直接写进 HTML（即内联 SVG），才能用 CSS 选中并过渡其中的 <path></path>、<circle></circle> 等子元素。用 <img> 或 <object></object> 引入的 SVG 是隔离的文档上下文，CSS 无法穿透。
验证方法：
- 打开开发者工具，检查图标是否能看到
<svg></svg>标签内部结构；如果只看到一个空<img>，说明是外部引用 - 改用内联方式：复制 SVG 源码（含
<svg>...</svg>），粘贴到 HTML 中，再加类名控制 - 如果必须复用图标，可用
<symbol></symbol>+<use></use>，但注意：<use></use>克隆的内容仍可被 CSS 选中，前提是<symbol></symbol>定义在当前文档内（如放在<svg style="display:none"></svg>中）
transform，而是让缩放中心稳在视觉中心、让点击延迟低于 200ms、以及确保 SVG 是可样式化的内联结构——这三处任一出错，动画就变成“闪一下”或“飞出去”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
