用 SVG 画一场雨：纯前端实现一个全屏线条下雨效果

最新推荐文章于 2025-12-18 11:32:02 发布

原创最新推荐文章于 2025-12-18 11:32:02 发布 · 1.3k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #svg #html

有时候做页面、公众号/H5、活动落地页，设计会丢给你一句需求：

“这里想要一层下雨的氛围，不要夸张闪电那种，就细细的线条雨，安静一点，高级一点。”

一般第一反应可能是：

去找一张带雨的背景图；
或者用 GIF 叠一层蒙版；
再高级一点就去搜 canvas 粒子雨 / WebGL 特效……

但其实，如果你只是想要一层干净、线条感的下雨效果，完全可以只用 一段 SVG + SMIL 搞定：
无 JS、无 CSS 动画、体积小，还能无损放大。

下面这段代码就是我在 E2 编辑器里看到的一个免费组件 ——
「全屏下雨 · 线条式」 导出的 SVG，
我拆了一遍，分享一下它是怎么用几条 <line> 画出一整场雨的。

一、先看核心结构：一个 `<svg>` + 一组 `<line>`

去掉外层的一些包裹标签（公众号适配相关），核心 SVG 大概长这样：

<svg viewBox="0 0 1080 1920">
  <g stroke="#000000"
     stroke-width="2"
     stroke-linecap="round"
     transform="rotate(10 540 960)">
    <line x1="100" y1="0" x2="100" y2="1920"
          opacity="0"
          stroke-dasharray="150 1770">
      <animate attributeName="stroke-dashoffset"
               from="1920" to="0"
               dur="1.3s"
               repeatCount="indefinite" />
      <animate attributeName="opacity"
               from="0" to="0.8"
               dur="0.1s"
               begin="0s"
               fill="freeze" />
    </line>

    <!-- 其他几条线，x 不同、dasharray 不同、速度/延迟不同 -->
  </g>
</svg>

肉眼看上去就是：

一个 <g>，统一设置了 颜色/粗细/圆角端点 + 整体旋转角度；
里面放了多条 <line>，每条线从顶部画到最底部；
每条 <line> 上都挂着两个 <animate>：
- 一个负责 stroke-dashoffset（让“雨滴”往下跑）
- 一个负责 opacity（从 0 慢慢出现）

没有路径插值、没有贝塞尔曲线，干干净净就是几条线。

二、为什么一条线能画出“雨滴”？stroke-dasharray 的小心机

关键在于 stroke-dasharray 这一行：

<line
  x1="100" y1="0"
  x2="100" y2="1920"
  stroke-dasharray="150 1770">

stroke-dasharray="150 1770" 的含义是：

把这一整条 1920 像素高的线段，拆成 150px 实线 + 1770px 空白 的重复 pattern；
因为总长刚好等于 1920，所以实际上只有一段 150px 的实线，其余都是透明空白；
换句话说：我们看到的是“掉落中的一段雨线”，而不是整条线。

再配合 stroke-linecap="round"：

<g stroke-linecap="round">

两头是圆头，所以视觉上就会像一条柔和的雨线。

其他几条线，会改一下 dasharray：

stroke-dasharray="50 1870"
stroke-dasharray="100 1820"
...

于是雨滴长度有长有短，看起来就更自然了。

三、雨是怎么“落下来”的？stroke-dashoffset 动起来

真正让这条“雨线”活起来的是：

<animate
  attributeName="stroke-dashoffset"
  from="1920"
  to="0"
  dur="1.3s"
  repeatCount="indefinite" />

stroke-dashoffset 的意思是：
把整段虚线 pattern 沿着路径偏移。

当 offset 较大时，那段 150px 的“可见实线”还在视野之外；
从 1920 逐渐减小到 0 的过程中，那段小实线就会从顶部往下滑过整条线；
看上去就像一截雨滴，从画面顶部冲下到画面底部。

而因为我们整条 <line> 是从 y=0 到 y=1920，
offset 又是从 1920 → 0，
所以刚好模拟了一段完整的“上 → 下”的掉落。

repeatCount="indefinite" 让这个过程一直循环：
这条雨线就永远在“接力”往下掉。

四、为什么雨不是垂直落下，而是斜着的？

注意 <g> 上有这么一行：

<g transform="rotate(10 540 960)">

也就是说，整组线（所有 <line>）都绕着画布中心 (540, 960) 旋转了 10°。

从物理世界视角看：

垂直的线 + 垂直的 dashoffset → 雨直上直下，有点“静态”；
微微倾斜 10° → 会有 风吹斜雨 的感觉，整个画面更自然。

这一招其实很好复用：

想做倾斜更大的“暴风雨” → 把角度改成 20 或 30；
想做轻微细雨 → 用 5~10° 这样的小角度即可。

五、不同列的雨线：延迟 + 不同速度，做出“乱中有序”

你会看到代码中有很多条 <line>，大概像这样：

<line x1="100" ... stroke-dasharray="150 1770">
  <animate dur="1.3s" begin="0s"   ... />
</line>

<line x1="300" ... stroke-dasharray="50 1870">
  <animate dur="1.6s" begin="0.4s" ... />
</line>

<line x1="550" ... stroke-dasharray="100 1820">
  <animate dur="1.5s" begin="0.8s" ... />
</line>

...

它们有几个差异：

x 不同：100、200、300、420、550、680、800、950 ……
→ 分布在不同的列上，看起来是“多排雨幕”。
stroke-dasharray 不同：
- 有的 150+1770 → 雨滴偏长
- 有的 50+1870 → 雨滴偏短
  → 让画面里有长雨线和短雨线混在一起。
dur 不同：
- 1.0s / 1.2s / 1.3s / 1.6s / 2.0s / 2.2s ……
  → 每条“雨线”的下落速度略微不同，有急有缓。
begin 不同：
- 0s / 0.2s / 0.4s / 0.6s / 0.8s / 1.0s / 1.2s / 1.6s ……
  → 每条线的动画启动时间错开，不会一起整齐地“齐刷刷下雨”。

这个组合出来，就是典型的“乱中有序”：

逻辑上只有几种 pattern，
视觉上却像一整片连绵不断的雨帘。

如果你想要雨“更密集一点”，
很简单：再复制几条 <line>，换一组 x / dur / begin 即可。

六、opacity 动画：第一帧避免“闪线”

每条线还有一个小小的透明度动画：

<animate
  attributeName="opacity"
  from="0" to="0.8"
  dur="0.1s"
  begin="0s"
  fill="freeze" />

或者：

from="0" to="0.5" begin="1.2s"
from="0" to="0.9" begin="1.6s"
...

这段的作用主要有两个：

解决初始闪烁问题
- 一上来就给一条线 full opacity，有时会闪一下整条线
- 先让 opacity 从 0 在 0.1s 内渐变到目标值，看起来更柔和
控制不同列的“存在感”
- 有的雨线透明度到 0.5 → 比较淡
- 有的到 0.9 → 比较明显
  → 画面里自然会有“前景雨 / 背景雨”的层次。

这也是小成本提升质感的一步，
几乎没增加任何逻辑，就把画面的层次感拉起来了。

七、怎么把它用在自己的项目里？

这个“全屏线条雨”其实特别适合：

公众号长图 / 活动详情页：做成一个“氛围背景层”；
H5 开屏 / 主题页：在深色背景上铺一层细雨；
官网 Hero 区：做点 微动的雨幕 + 文案 + CTA 按钮；
深色模式下的 loading 遮罩：比转圈圈舒服多了。

你可以根据实际项目做一点小改造：

1. 调整颜色 & 粗细

在 <g> 上改 stroke 即可：

<g stroke="#4FC3F7" stroke-width="1.5">

比如：

暗色背景上 → 用青蓝色、青绿色雨线；
日系插画风 → 用偏灰、偏蓝、半透明的雨线。

2. 调节雨势大小（疏密 & 速度）

更密：复制更多 <line>，让 x 坐标更均匀一点。
更大雨：
- 线条加粗 2~3px
- dasharray 的“实线长度”加大，如 200 1800
更狂风暴雨：
- 旋转角度 20~30°
- dur 减小，比如 0.8s / 1.0s

3. 改方向：从右往左的斜风细雨

如果你想做那种“雨斜着刮”的效果，也可以直接：

保持线条竖直
把 <g> 的 rotate 改成负角度，比如 rotate(-10 540 960)

看起来就会从右上往左下斜着飘。

八、如果你懒得手写：E2 编辑器里直接搜“全屏下雨”

上面这整套下雨效果，其实都来自于 E2 编辑器里的一个免费组件：

组件名字类似：「全屏下雨 · 线条式」；
你可以直接在编辑器里加一层，调整颜色/粗细/透明度，
再导出 SVG 嵌入到公众号 / H5 / Web 项目里；
要再改动的话，就像上面拆的一样，
把 <line> 的 x / dur / dasharray / begin 稍微调一下就够了。

不得不说，E2 编辑器这波脑洞还是很实用：
把这种本来要写一堆 canvas 逻辑才能实现的雨幕效果，
封装成“几条线 + 几个 animate”的 SVG 模板，
对前端、对运营同学都非常友好。

九、总结一下

这次的 SVG 下雨效果，本质就三件事：

用 <line> + stroke-dasharray 把一整条竖线变成“短雨滴”；
用 <animate attributeName="stroke-dashoffset"> 让这段雨滴沿着线向下滚动；
用多条线、不同的 x / dur / begin / opacity + 整体 rotate 做出一整片 风中斜雨。

看起来是一整场很有氛围感的雨，
拆开却只是一些非常朴素、好记又好改的 SVG 小技巧。

你可以把它当做一个“雨幕背景模板”：

想要一点安静的氛围 → 几条线 + 慢节奏
想要紧张/戏剧感 → 多线 + 倾斜 + 加速

最后，如果你对这种 “SVG 小动效拆解 + 可直接上手修改” 的内容感兴趣，
后面还可以继续聊聊：

SVG 雪花飘落
SVG 烟花 / 流星
SVG 水波 / 雾气

欢迎在评论区丢一丢你想实现的“天气特效”，
我再从 E2 编辑器的组件库里给你翻一翻，找几个好拆又好用的来研究～