SVG图标CSS变形需内联结构、双路径显隐或单路径transform、完整关键帧加GPU加速、dataset状态管理及pointer-events防连点。
SVG 图标配合 CSS 动画实现复杂变形，关键不在“堆效果”，而在“控路径、分状态、避陷阱”。真正能落地的变形动画，必须满足可访问、可复用、不卡顿、不跳帧四个基本要求。
结构必须内联 SVG，不能用 background 或外链
只有内联 SVG 才能通过 CSS 选中
- ✅ 正确写法：
<button><svg class="icon"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path></svg></button> - ❌ 错误写法：
<button style="background: url(icon.svg)"></button>—— 无法改颜色、无法做路径切换、无法加 ARIA 属性 - 图标需设
aria-hidden="true"（按钮有文字）或aria-label（纯图标），确保屏幕阅读器不误读
变形动画只靠两套方案：显隐切换 or 路径位移
SVG 的 d 属性（路径数据）本身不可动画，强行加 transition: d 无效。可行路径只有两条：
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
-
方案一：双 path + opacity/visibility 切换
比如播放 ⇄ 暂停：准备两个
，一个画播放三角形，一个画暂停双竖线；用 .playing .pause-path { opacity: 0; }和.paused .play-path { opacity: 0; }控制显隐，过渡平滑、兼容性好 -
方案二：单 path + transform 移动/旋转/缩放
比如汉堡菜单 ⇄ 关闭 X：把三条横线分别包裹在
或单独 中，用 transform: rotate(45deg) translate(4px, 4px)精准调整每条线位置；注意必须设transform-origin: center，否则旋转中心偏移
CSS 动画要写全关键帧，GPU 加速不能省
只写 to { transform: rotate(360deg); } 在 Safari 和部分安卓机上容易跳回 0 度。必须显式声明 from → to，且触发硬件加速：
立即学习“前端免费学习笔记（深入）”；
- 关键帧定义：
@keyframes spin { from { transform: rotate(0deg) translateZ(0); } to { transform: rotate(360deg) translateZ(0); } } - 应用时加
will-change: transform或transform: translateZ(0)，强制走 GPU 渲染 - 避免同时动画 width、margin、top 等触发重排的属性——哪怕只动一个，也会拖慢整个动画
- SVG 尺寸用整数：
width="24" height="24"，别用23.5，否则旋转边缘发虚
状态管理靠 dataset，防连点靠 pointer-events
图标变形本质是状态切换，不能靠 class 切换硬编码，要用语义化方式管理：
- 点击后立刻执行：
btn.dataset.state = "loading"或btn.dataset.state = "active" - CSS 用属性选择器响应：
button[data-state="loading"] .icon { animation: spin 1s linear infinite; } - 防重复点击：加
pointer-events: none到按钮上（不是disabled，后者会破坏焦点和 ARIA） - 所有异步操作结束，必须手动还原：
btn.dataset.state = ""并清除 ARIA 属性如aria-busy="false"
