SVG点击形变必须用@keyframes+animation实现缓动效果，不能仅靠:active中transform瞬时变化；需设transform-origin:center、animation-fill-mode:forwards，并为多路径分别定义动画，同时配置touch-action:manipulation和user-select:none保障移动端响应。
SVG点击形变必须用@keyframes + animation，不能只靠transform
直接写transform: scale(1.2) rotate(15deg)在:active里只会瞬间跳变，没有缓动效果。CSS形变动画本质是属性随时间变化的过程，必须通过@keyframes定义状态序列，再用animation驱动。
常见错误是把transition误用于复杂形变——它只适合单一属性的线性过渡（比如颜色、opacity），而scale+rotate+skew组合需要精确控制各阶段的插值节奏，transition无法胜任。
-
@keyframes里至少写两个关键帧：from和to，中间可加30%、70%等细化形变节奏 - 动画触发建议用
:active而非:hover，避免误触或悬停不精准问题 - 别忘了加
animation-fill-mode: forwards，否则动画结束后会弹回原始形态
transform组合形变时，transform-origin必须显式设为center
SVG默认以左上角为变换原点，点击时图标会向右下偏移甚至移出视口。尤其当同时用scale和rotate时，偏移会被放大。
即使viewBox="0 0 24 24"，也不代表中心点自动对齐。必须给<svg></svg>或内部<g></g>加transform-origin: center，且最好配合固定宽高：
立即学习“前端免费学习笔记（深入）”；
.icon {
width: 24px;
height: 24px;
transform-origin: center;
}
.icon:active {
animation: squashAndTwist 0.3s ease-out forwards;
}
- 如果SVG是
<use></use>引用的，transform-origin要加在<use></use>元素本身，不是<symbol></symbol> - Chrome对SVG
transform-origin支持稳定，但旧版Safari需加-webkit-transform-origin - 避免用
%或em设transform-origin，数值单位不一致会导致错位
多路径SVG形变要分别控制，别指望父容器transform统一生效
一个图标含<path></path>、<circle></circle>、<rect></rect>多个子元素时，对<svg></svg>加animation只会让整个图块平移缩放，各图形相对位置不变——看起来像“贴纸被捏”，不是真实形变。
真形变得让每个图形按不同节奏变形：比如外框拉伸、内图标旋转、描边粗细变化。这就要求逐个选择并绑定动画：
.icon-path { animation: stretchX 0.2s ease-in; }
.icon-circle { animation: spinY 0.25s ease-out; }
.icon-rect { animation: thickenStroke 0.15s linear; }
- 用
class区分不同路径比用nth-child更可靠，避免DOM结构微调就失效 - 所有动画时长尽量保持在
0.15–0.3s之间，超过0.35s用户会觉得卡顿 - 别用
animation-delay错开多个动画——点击响应必须即时，延迟会破坏交互直觉
移动端点击形变容易失效，关键是touch-action和user-select
在iOS Safari或安卓Chrome里，点击后图标没反应，大概率是浏览器把点击事件吞掉了。SVG元素默认有touch-action: auto，可能触发滚动或缩放拦截。
必须显式关闭干扰行为：
.icon {
touch-action: manipulation;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
-
touch-action: manipulation允许点击和双指缩放，禁用拖拽和滚动，是最安全的取值 - 不加
user-select: none的话，快速连点可能触发文字选中，导致形变动画中断 - 部分安卓WebView仍需
cursor: pointer才能激活:active伪类，别省略
@keyframes，而是让每个图形元素的变形节奏、原点、触发时机严丝合缝——差5毫秒或2像素偏移，用户就会觉得“不对劲”。实际项目里建议先用单路径SVG验证逻辑，再逐步叠加复杂度。 
