20 / 07 / 14

用 CSS 控制 SVG 动画

SVG 有很多好处，诸如良好的缩放支持，不用担心屏幕像素密度；较小的文件大小（当然这取决于绘制图像的路径复杂度）；可以使用 CSS 控制 SVG（这点很重要，我们将在此篇文章中利用它）等等。

我们知道 SVG 应用于 icon 是一个典型的使用场景，而 CSS Animation 同样是一个令人愉悦的 Web 技术，当这两者结合时，oh，amazing~

SVG 也有内置的动画语法，如 animate,animateMotion 等，非本文讨论范畴（笔者对于此也不是很了解）

Animation SVG Moon

<p class="codepen" data-height="405" data-theme-id="light" data-default-tab="html,result" data-user="EryouHao" data-slug-hash="YzwOqMG" style="height: 405px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="SVG Animation Moon">
  <span>See the Pen <a href="https://codepen.io/EryouHao/pen/YzwOqMG">
  SVG Animation Moon</a> by EryouHao (<a href="https://codepen.io/EryouHao">@EryouHao</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

是的，style 可以写到 svg 标签内部，这样你可以像引用 svg icon 一样直接使用带有动画 icon。另外的一个好处是，你可以将 svg 用于 img 标签，像使用一个 GIF 一样。下面这个图片就是上面代码所示的 svg 👇

另外，你甚至可以像这样，提供一个富有交互的 icon（仅支持执行在代码中使用 svg）

Animation unDraw

undraw.co 是一个非常棒的开源插图库，种类丰富，如果你想用插图丰富一下你的网页、Slide 或其他的任何东西，不妨一试，总能找到称心的。

偶然间，在 Youtube 上看到 @Dev Ed 发布的一个 Learn to Build An SVG Animation With CSS 视频，想到站在巨人的肩膀上，使用 CSS 将插图动起来将是多么令人振奋。Let's do it~

emmm.... 动起来了，这里就不贴代码了（图片组成路径复杂导致代码略长），💡 相信你可以轻易找到查看代码的方式。

如果足够有创意和对 SVG 感兴趣，做一整套 Animation unDraw 也是不错的