SVG 动画入门：让图形动起来

静态 SVG 已经够用，但加一点动效能让图标和插画立刻生动：加载时转一圈的 spinner、hover 时跳一下的心形、沿路径跑的小圆点。三种实现方式，从易到难。

方式一：CSS 动画（最常用）

把 SVG 内联进 HTML 后，它的元素就是普通 DOM,可以用 CSS 选中并加动画：

.spin { animation: rot 1.2s linear infinite; transform-origin: center; }
@keyframes rot { to { transform: rotate(360deg); } }

给圆或分组加上 class="spin" 就会匀速旋转——加载 spinner 就是这么做的。注意 transform-origin 要设对，否则会绕着画布角落转。

方式二：SMIL（写在 SVG 内部）

<circle cx="20" cy="50" r="6" fill="#2563eb">
  <animate attributeName="cx" from="20" to="180" dur="2s" repeatCount="indefinite"/>
</circle>

<animate> 标签直接写在元素里，文件发给别人、脱离网页也能播。缺点是复杂交互做不了，胜在自带播放、零依赖。

方式三：hover 交互

CSS 的 :hover 配 transition 就够：鼠标移上图标时放大 1.1 倍或变色，0.2 秒过渡。这种「小反应」是界面质感的主要来源，别贪多。