skillhub-088-vercel-react-best-practices/rules/rendering-animate-svg-wrapper.md

标题, 影响, 影响描述, 标签

标题	影响	影响描述	标签
Animate SVG Wrapper Instead of SVG Element	低	启用硬件加速	渲染, svg, css, 动画, 性能

对 SVG 包装元素而非 SVG 本身进行动画处理

许多浏览器不支持对 SVG 元素应用 CSS3 动画的硬件加速。将 SVG 包裹在 <div> 中，然后对包装元素进行动画处理。

错误做法（直接对 SVG 进行动画处理——无硬件加速）：

function LoadingSpinner() {
  return (
    <svg 
      className="animate-spin"
      width="24" 
      height="24" 
      viewBox="0 0 24 24"
    >
      <circle cx="12" cy="12" r="10" stroke="currentColor" />
    </svg>
  )
}

正确做法（对包装 div 进行动画处理——硬件加速）：

function LoadingSpinner() {
  return (
    <div className="animate-spin">
      <svg 
        width="24" 
        height="24" 
        viewBox="0 0 24 24"
      >
        <circle cx="12" cy="12" r="10" stroke="currentColor" />
      </svg>
    </div>
  )
}

此规则适用于所有 CSS 变换与过渡（transform、opacity、translate、scale、rotate）。使用包装 div 可以让浏览器利用 GPU 加速，实现更流畅的动画效果。