使用CSS实现一个小欧，让它动起来

用户故事

看到这个小欧我就爱上了它。

计划是使用svg来画它。所以这篇文章会包括 svg 基本用法、以及 svg 如果做动画的。

故事拆解

技术实现

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- 耳朵 -->
  <path fill="#FDB813" d="M10,50 Q20,20 40,20 L40,20 Q60,20 70,50 Q60,80 40,80 L40,80 Q20,80 10,50 Z" />
  <path fill="#FDB813" d="M90,50 Q80,20 60,20 L60,20 Q40,20 30,50 Q40,80 60,80 L60,80 Q80,80 90,50 Z" />
  <!-- 身体 -->
  <path fill="#F56C6C" d="M40,80 Q20,80 10,50 Q20,20 40,20 L40,20 Q60,20 70,50 Q60,80 40,80 Z" />
  <path fill="#F56C6C" d="M60,80 Q80,80 90,50 Q80,20 60,20 L60,20 Q40,20 30,50 Q40,80 60,80 Z" />
  <!-- 眼睛 -->
  <circle fill="#FFFFFF" cx="35" cy="45" r="8" />
  <circle fill="#FFFFFF" cx="65" cy="45" r="8" />
  <circle fill="#2C2C2C" cx="35" cy="45" r="4" />
  <circle fill="#2C2C2C" cx="65" cy="45" r="4" />
  <!-- 嘴巴 -->
  <path fill="#2C2C2C" d="M40,60 Q50,70 60,60" />
</svg>

这段代码使用了SVG的<path>、<circle>和<svg>标签来绘制耳朵、身体、眼睛和嘴巴，其中viewBox属性设置了SVG画布的大小。您可以根据需要修改这些标签的属性来调整米兔的外观。

实现动画：

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <path id="oppo-path" d="M50,100 Q100,20 150,100 Q100,180 50,100 Z" fill="none" stroke="#F29B22" stroke-width="8" />
  <text font-size="60" font-weight="bold" fill="#F29B22">
    <textPath xlink:href="#oppo-path">
      OPPO
    </textPath>
  </text>
  <animateMotion xlink:href="#oppo-path" dur="5s" repeatCount="indefinite">
    <mpath xlink:href="#oppo-path" />
  </animateMotion>
</svg>

这段代码使用了SVG的<path>、<text>和<animateMotion>标签来实现OPPO的字迹的动画效果。其中<path>标签定义了OPPO字迹的路径，<text>标签定义了OPPO字体的样式和文本内容，<textPath>标签将文本沿着字迹路径进行排列。<animateMotion>标签实现了字迹路径的动画效果，<mpath>标签指定了动画的路径。

对于svg标签的简单理解可以去看玩一峰的博客。更多的是要动手实践。

为什么将svg作为图标的时候性能消耗更大

这个是有一个前提的，从上面可知。svg其实就是一堆html标签的集合。也就意味着，css是可以直接运用到上面去。

所以说，svg的图标能够实现的效果可以说的无限的，比字体图标更加的丰富。这也意味着它也涉及到了DOM的回流重绘。

“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 26 天，点击查看活动详情”