用途:解决许多浏览器对 SVG 元素上的 CSS3 动画不提供硬件加速的问题。做法是把 SVG 包进一个 div,并对包裹用的 div 施加动画,而不是直接动画 SVG 本身。这对包含像素风图标与动画的 8-bit 组件尤为重要。
主要能力:适用于所有 CSS 变换与过渡,包括 transform、opacity、translate、scale、rotate。通过外层 div,浏览器可以使用 GPU 加速,动画更加流畅,在复古像素动画上尤为明显。
使用方式:错误做法是直接给 svg 加 animate-spin 类;正确做法是给外层 div 加 animate-spin,svg 保留 viewBox、width、height 等属性。对带悬停效果的 8-bit 图标组件,可将 transition-transform hover:scale-110 等类放在包裹 div 上,内部渲染 Icon。
适用场景:动画 SVG 图标或元素,尤其是 8-bit 复古组件、像素风图标以及需要悬停缩放等交互效果的场景。
限制:资料仅说明该浏览器加速差异与包裹写法,未提供其他性能数据、兼容性版本范围或构建配置要求。