SVG实现移动端动态天气图标需分层绘制云与雨滴，用CSS动画控制下落和微移，优先使用transform/opacity提升性能，适配响应式与低功耗设备。
在 H5 页面中用 SVG 实现移动端天气预报的动态阴天与雨滴图标，关键在于：用 SVG 绘制简洁云层 + 雨滴轮廓，再通过 CSS 动画控制雨滴下落、云层轻微位移和透明度变化，兼顾性能与视觉自然感。避免 JS 频繁操作 DOM，优先使用 transform 和 opacity 这类可 GPU 加速的属性。
SVG 结构：分层绘制云与雨滴
云用 <path> 描绘柔和轮廓（避免过多贝塞尔节点），雨滴用 <g> 包裹多个 <path> 或 <circle> 模拟不同大小/位置的下落效果。建议将雨滴放在云的 <g> 内部并设 overflow="visible"，方便整体动画协调：
<svg viewBox="0 0 120 80" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<g id="cloud">
<path d="M30,40 Q40,25 55,25 Q70,25 80,35 Q90,45 85,55 Q80,65 65,65 Q50,65 40,55 Q30,45 30,40 Z" fill="#a0b3c9"/>
</g>
<g id="rain">
<path d="M45,50 L47,75" stroke="#8aa0bb" stroke-width="1.2" opacity="0.7"/>
<path d="M58,48 L60,73" stroke="#8aa0bb" stroke-width="1.0" opacity="0.6"/>
<path d="M72,52 L74,77" stroke="#8aa0bb" stroke-width="1.3" opacity="0.8"/>
</g>
</svg>
CSS 动画：雨滴下落 + 云层微动
给 #rain 中每个雨滴定义独立动画（避免卡顿），用 @keyframes 控制 transform: translateY()；同时为 #cloud 添加缓慢水平+垂直偏移，模拟风感：
- 雨滴动画时长设为 1.2s–1.8s 不等，配合
ease-in更真实；起始opacity: 0，中途渐显，末尾淡出 - 云层用
animation: drift 25s infinite ease-in-out，位移控制在 ±3px 内，避免干扰主视觉 - 所有动画加
will-change: transform提升渲染效率（尤其在 iOS Safari）
适配移动端：响应式与性能优化
移动端需考虑小屏清晰度与低功耗设备性能：
- SVG 使用
viewBox而非固定宽高，配合 CSS 设置width: 100%; max-width: 64px;，确保在按钮或卡片中缩放不失真 - 雨滴数量控制在 3–5 条，避免低端安卓机掉帧；如需“大雨”效果，改用更细的线条 + 更快动画，而非堆叠元素
- 添加媒体查询，在
prefers-reduced-motion: reduce下关闭动画，仅保留静态云图
进阶提示：轻量交互反馈
点击图标可触发状态切换（如阴转雨），只需用 JS 切换 SVG 元素 class：
- 例如加
class="raining"后，CSS 中激活雨滴动画；移除后自动暂停（利用animation-play-state: paused） - 避免用
setInterval重绘雨滴位置，CSS 动画已足够表现连续感 - 若需雨滴落地水花，可用 SVG
<circle>在底部做极短脉冲缩放动画（持续 0.2s），不增加复杂度
