svg多层嵌套齿轮无限匀速旋转需用分组、统一中心锚点、独立css动画控制转速，通过@keyframes rotate配合不同animation-duration实现差速，结合+复用齿形并保持比例，辅以pointer-events:none和will-change优化性能。
在 H5 页面中用 SVG 实现多层嵌套齿轮的无限匀速旋转，核心是利用 SVG 的 <g></g> 分组、transform 变换和 CSS @keyframes 动画（或 SMIL，但推荐 CSS 方案），关键在于每层齿轮独立旋转、中心对齐、转速按比例设定，避免视觉卡顿或错位。
结构设计：用 <g></g> 嵌套分层，统一中心锚点
所有齿轮必须围绕同一坐标中心（如 cx="0" cy="0"）绘制，外层 <g></g> 包裹内层，形成视觉上的“嵌套”关系。不要靠绝对定位拼凑，而要通过 transform="translate(x,y)" 将整个齿轮组移到页面所需位置。
- 最外层
<g id="gear-system"></g>负责整体位移（比如移到屏幕中央） - 每层齿轮用独立
<g class="gear" data-layer="1"></g>包裹，内部是<circle></circle>+ 齿形路径（可用<use></use>复用齿模板） - 所有齿轮的
transform-origin设为center，确保绕中心自转
动画实现：CSS @keyframes + 独立 duration 控制转速
每层齿轮设不同 animation-duration 实现“差速旋转”，例如外层 6s 一圈、中层 4s、内层 3s，就能呈现机械咬合的错落感。用 linear 动画函数保证匀速，infinite 实现无限循环。
- 定义通用旋转动画：
@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } - 为每层加类名并指定时长：
.gear-outer { animation: rotate 6s linear infinite; }、.gear-middle { animation: rotate 4s linear infinite; } - 注意：若用
transform: rotate()，需确保 SVG 元素本身无其他干扰 transform（如 scale/translate 混用），否则会叠加出错
齿轮绘制技巧：用 <defs></defs> + <use></use> 复用齿形，保持比例精准
手写齿轮路径易变形，推荐用脚本生成齿形 path 后存入 <defs></defs>，再用 <use></use> 引用并缩放。各层半径按整数比（如 3:2:1）设定，齿数也按比例（如 36:24:12），才能视觉上“咬合”自然。
- 示例齿形定义：
<defs><path id="tooth" d="M0,-10 L2,-3 L0,0 L-2,-3 Z"></path></defs> - 某层齿轮：
<g class="gear-outer"><circle r="60"></circle><g id="teeth"><use href="#tooth" transform="rotate(0)"></use>...</g></g> - 用 JS 或预计算生成 36 个
<use></use>，每个 rotate 步进360/36 = 10deg
兼容性与优化：禁用 pointer-events + 启用 will-change
纯装饰性旋转齿轮无需交互，建议加 pointer-events: none 避免遮挡下层元素；对高频动画层加 will-change: transform 提升渲染性能（尤其移动端）。
- CSS 中添加：
.gear { pointer-events: none; will-change: transform; } - 若需支持老版 iOS（transform: rotateZ() 或补全
-webkit-前缀 - 避免在
<svg></svg>上直接设 width/height 百分比导致缩放失真，推荐用viewBox+ 固定宽高容器控制尺寸
