SVG 是更实际的选择。纯 CSS 图标缩放失真、抗锯齿差、颜色控制弱，而 SVG 路径精准、支持动态填色与 currentColor 适配暗色模式，且避免 Unicode 字符错位问题。
播放器图标用 SVG 还是纯 CSS？
SVG 是更实际的选择。纯 CSS 画三角形、圆圈虽然能凑出 ▶ 或 ⏸，但缩放失真、抗锯齿差、颜色控制弱，尤其在高清屏或动态主题下容易糊成一片。SVG 路径精准、支持 fill 和 stroke 动态改色，还能用 currentColor 自动继承文字色，适配暗色模式也省事。
常见错误：用 ▶ 这类 Unicode 字符当图标——字号一变就错位，和按钮高度对不齐，hover 时还可能触发文本选中。
实操建议：
- 直接内联 SVG，避免 HTTP 请求和跨域问题
- 把 viewBox 设为 "0 0 24 24"，方便后续用 width/height 缩放
- 路径尽量精简，别用设计工具导出的冗余属性（比如 fill-rule、stroke-linecap）
怎么让 SVG 播放图标响应 hover 和 focus 状态？
关键不是加 class 切换，而是利用 SVG 内部元素的伪类穿透能力。外层容器加 tabindex="0"，再用 :hover svg path 或 :focus-within svg path 控制路径颜色或描边粗细。
容易踩的坑：
- 忘了给 SVG 加 role="img" 和 aria-hidden="true"，屏幕阅读器会把路径当文字读出来
- 用 fill: #000 写死颜色，导致无法通过 CSS 变量统一换肤
- 在 :active 里只缩放 SVG，没加 transform-origin: center，结果图标往左上角跑
示例片段：
<button tabindex="0"><br> <svg viewBox="0 0 24 24" role="img" aria-hidden="true"><br> <path d="M8 5v14l11-7z"/><br> </svg><br></button>
对应 CSS：
button:hover svg path { fill: var(--primary, #007bff); }<br>button:focus-within svg path { stroke: currentColor; stroke-width: 2px; }
用 clip-path 做圆形播放按钮时为啥边缘发虚？
因为 clip-path: circle() 在部分 Chrome 和 Safari 上默认开启抗锯齿，但裁剪边界和像素对齐不匹配，尤其在非整数尺寸下会模糊。这不是 bug，是渲染策略差异。
立即学习“前端免费学习笔记（深入）”；
解决办法：
- 改用 border-radius: 50% 包裹 SVG 容器，比 clip-path 兼容性好、边缘锐利
- 如果必须用 clip-path，加上 shape-rendering: crispEdges 强制关闭抗锯齿
- 避免对 SVG 本身设 width/height 为小数（如 23.5px），保持整数像素值
性能注意：频繁动画 clip-path 会触发重排，而 transform 不会。暂停/播放状态切换，优先用 transform: scale() 而非 clip-path 动画。
暗色模式下播放图标颜色怎么自动适配？
别写两套 class 切换。直接用 color-scheme: light dark + currentColor 就够了。SVG 的 fill 或 stroke 设为 currentColor，然后在根元素用 @media (prefers-color-scheme: dark) 控制 color 值，图标颜色自然跟着变。
容易被忽略的点：
- 忘了给 或 加 color-scheme: light dark，导致系统级暗色提示不生效
- 在按钮上设了 background-color 却没同步更新 color，结果图标变成黑底黑图看不见
- 使用 filter: invert(1) 强行反转——会把 SVG 里的渐变、描边全搞乱，且不支持部分旧版 Safari
一句话收尾：图标本身越简单（单色、无渐变、无描边混合），在各种缩放、主题、DPR 下越稳。复杂视觉效果，优先交给外层容器或伪元素承担，别塞进 SVG 路径里。
