SVG动画硬件加速优化Skill rendering-animate-svg

---

name: rendering-animate-svg description: 将动画SVG元素包装在div中以启用硬件加速。适用于动画SVG图标或元素，特别是在具有像素艺术动画的8位复古组件中。

动画SVG包装器而不是SVG元素

许多浏览器对SVG元素的CSS3动画没有硬件加速。将SVG包装在<div>中并动画包装器。对于具有像素艺术图标和动画的8位组件很重要。

错误（直接动画SVG - 无硬件加速）：

function PixelSpinner() {
  return (
    <svg
      className="animate-spin"
      viewBox="0 0 16 16"
    >
      <rect x="2" y="2" width="4" height="4" fill="currentColor" />
    </svg>
  )
}

正确（动画包装器div - 硬件加速）：

function PixelSpinner() {
  return (
    <div className="animate-spin">
      <svg
        viewBox="0 0 16 16"
        width="16"
        height="16"
      >
        <rect x="2" y="2" width="4" height="4" fill="currentColor" />
      </svg>
    </div>
  )
}

对于具有悬停效果的8位图标组件：

function RetroIcon({ icon: Icon, className }: RetroIconProps) {
  return (
    <div className={cn("transition-transform hover:scale-110", className)}>
      <Icon />
    </div>
  )
}

这适用于所有CSS变换和过渡（transform、opacity、translate、scale、rotate）。包装器div允许浏览器使用GPU加速以获得更平滑的动画，这在复古像素艺术动画中尤其明显。