为 Figma 的 SVG 导出添加动画

When you're implementing a design that involves SVGs, you're pretty much always going to be using a generated piece of SVG code instead of hand-coding the SVG yourself. It's a lot easier to make SVGs in Figma than in code anyway, so why go the hard route?
当你实施一个涉及 SVG 的设计时，你几乎总是会使用生成的 SVG 代码，而不是自己手动编码 SVG。无论如何，在 Figma 中制作 SVG 比在代码中要简单得多，那么为什么要走困难的路呢？

Here's the thing: generated SVG code is often really hard to parse. If you can't make out what the SVG code is doing, how would you begin to animate it? Is there a way to export the SVG so that it's easy to animate?
事情是这样的：生成的 SVG 代码通常真的很难解析。如果你无法理解 SVG 代码在做什么，如何开始对其进行动画处理？ 有没有办法导出 SVG，使其便于动画制作？

Why yes! Kind of. In this post, I want to explore a few different techniques—both in Figma and in code—that will help in animating these exports.
当然可以！在这篇文章中，我想探讨一些不同的技术——无论是在 Figma 还是在代码中——这将有助于对这些导出进行动画处理。

Understanding Figma Exports
理解 Figma 导出

The main reason why Figma's exports are so hard to work with is that it typically jumbles the entire icon into a single <path> element.
Figma 导出这么难以使用的主要原因是它通常将整个图标混合成一个单一的 <path> 元素。

This color swatch icon, for example, looks like this exported directly from Figma:
这个颜色样本图标，例如，看起来像是直接从 Figma 导出的：

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path
    d="M7.4 16.5H7.6M11.3958 18.7499L16.6458 9.65667C17.4742 8.22179 16.9826 6.38702 15.5477 5.55859L13.3245 4.27504C12.8173 3.98221 12.1894 3.99558 11.6951 4.30975M11.0001 19.6742L18.8414 15.147C20.2763 14.3186 20.7679 12.4838 19.9395 11.0489L18.5187 8.58816C18.3086 8.22421 17.9203 8 17.5 8M12 16.5V6C12 4.34315 10.6569 3 9 3H6C4.34315 3 3 4.34315 3 6V16.5C3 18.9853 5.01472 21 7.5 21C9.98528 21 12 18.9853 12 16.5ZM8 16.5C8 16.7761 7.77614 17 7.5 17C7.22386 17 7 16.7761 7 16.5C7 16.2239 7.22386 16 7.5 16C7.77614 16 8 16.2239 8 16.5Z"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
  />
</svg>

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path
    d="M7.4 16.5H7.6M11.3958 18.7499L16.6458 9.65667C17.4742 8.22179 16.9826 6.38702 15.5477 5.55859L13.3245 4.27504C12.8173 3.98221 12.1894 3.99558 11.6951 4.30975M11.0001 19.6742L18.8414 15.147C20.2763 14.3186 20.7679 12.4838 19.9395 11.0489L18.5187 8.58816C18.3086 8.22421 17.9203 8 17.5 8M12 16.5V6C12 4.34315 10.6569 3 9 3H6C4.34315 3 3 4.34315 3 6V16.5C3 18.9853 5.01472 21 7.5 21C9.98528 21 12 18.9853 12 16.5ZM8 16.5C8 16.7761 7.77614 17 7.5 17C7.22386 17 7 16.7761 7 16.5C7 16.2239 7.22386 16 7.5 16C7.77614 16 8 16.2239 8 16.5Z"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
  />
</svg>

*One minor tweak I did here was to change the stroke attribute to currentColor to make it work in dark mode.
我在这里做的一个小调整是将描边属性更改为 currentColor，以使其在暗模式下正常工作。

While there is meaning behind this super-long string of numbers (check out my post on SVG paths to learn more!), it's nonetheless impossible to parse—how can you tell which part of the icon corresponds to which part of the path?
虽然这串超长的数字背后有含义（可以查看我关于 SVG 路径的帖子来了解更多！），但它仍然无法解析——你怎么知道图标的哪个部分对应路径的哪个部分呢？

The way that Figma's exports work is by mapping each shape into a corresponding SVG element:
Figma 的导出方式是将每个形状映射到相应的 SVG 元素中：

Frames are converted to <svg> elements with matching width and height:
框架被转换为<svg>元素，具有匹配的width和height：

<svg
  width="191.3"
  height="172.5"
  viewBox="0 0 191.3 172.5"
>
  ...
</svg>

<svg
  width="191.3"
  height="172.5"
  viewBox="0 0 191.3 172.5"
>
  ...
</svg>

Rectangles, lines, and ellipses are exported as <rect>, <line>, and <ellipse> (or <circle>) elements, respectively:
矩形、线条和椭圆分别导出为 <rect>、<line> 和 <ellipse>（或 <circle>）元素：

Frame 1 框架 1

<svg viewBox="0 0 24 24">
  <line
    x1="2"
    y1="9"
    x2="20"
    y2="18"
    stroke="currentColor"
  />
</svg>

<svg viewBox="0 0 24 24">
  <line
    x1="2"
    y1="9"
    x2="20"
    y2="18"
    stroke="currentColor"
  />
</svg>

Try interacting with the shape to see how the code changes!
尝试与形状互动，看看代码是如何变化的！

All other shapes, including arrows, polygons, and vectors, are exported as <path> elements:
所有其他形状，包括箭头、多边形和矢量，都作为 <path> 元素导出：

<svg
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M18 6C18 5.44771 17.5523 5 17 5L8 5C7.44772 5 7 5.44771 7 6C7 6.55228 7.44772 7 8 7H16V15C16 15.5523 16.4477 16 17 16C17.5523 16 18 15.5523 18 15L18 6ZM6.70711 17.7071L17.7071 6.70711L16.2929 5.29289L5.29289 16.2929L6.70711 17.7071Z"
    fill="currentColor"
  />
</svg>

<svg
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M18 6C18 5.44771 17.5523 5 17 5L8 5C7.44772 5 7 5.44771 7 6C7 6.55228 7.44772 7 8 7H16V15C16 15.5523 16.4477 16 17 16C17.5523 16 18 15.5523 18 15L18 6ZM6.70711 17.7071L17.7071 6.70711L16.2929 5.29289L5.29289 16.2929L6.70711 17.7071Z"
    fill="currentColor"
  />
</svg>

These export rules mean that if the icon is jumbled together into a single vector in Figma, it will be jumbled together into a single <path> element in the export.
这些导出规则意味着，如果图标在 Figma 中混合成一个单一的矢量 in Figma，它将在导出中混合成一个单一的 <path> 元素 in the export。

vector 向量

<svg
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M8 12H6C4.89543 12 4 12.8955 4 14C4 15.1046 4.89543 16 6 16H16C17.1046 16 18 16.8955 18 18C18 19.1046 17.1046 20 16 20H12M12 12L13.7573 12C14.553 12 15.3161 11.684 15.8787 11.1213L19.5 7.49995C20.3284 6.67152 20.3284 5.32838 19.5 4.49996C18.6716 3.67156 17.3284 3.67156 16.5 4.49998L12.8787 8.12132C12.3161 8.68393 12 9.44699 12 10.2426V12Z"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
  />
</svg>

<svg
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M8 12H6C4.89543 12 4 12.8955 4 14C4 15.1046 4.89543 16 6 16H16C17.1046 16 18 16.8955 18 18C18 19.1046 17.1046 20 16 20H12M12 12L13.7573 12C14.553 12 15.3161 11.684 15.8787 11.1213L19.5 7.49995C20.3284 6.67152 20.3284 5.32838 19.5 4.49996C18.6716 3.67156 17.3284 3.67156 16.5 4.49998L12.8787 8.12132C12.3161 8.68393 12 9.44699 12 10.2426V12Z"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
  />
</svg>

But if the icon is split into multiple vectors, the export, too, will be split into multiple <path> elements:
但如果图标被分成多个矢量，则导出也会分成多个 <path> 元素：

vector 向量
vector 向量

<svg
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M19.4142 4.41414C18.6332 3.63311 17.3668 3.63311 16.5858 4.41416L12.5858 8.41417C12.2107 8.78924 12 9.29795 12 9.82838V12H14.1716C14.702 12 15.2107 11.7893 15.5858 11.4142L19.5858 7.41413C20.3668 6.63307 20.3668 5.36674 19.5858 4.5857L19.4142 4.41414Z"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
  />
  <path
    d="M8 12H6C4.89543 12 4 12.8954 4 14C4 15.1046 4.89543 16 6 16H16C17.1046 16 18 16.8954 18 18C18 19.1046 17.1046 20 16 20H12"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
  />
</svg>

<svg
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M19.4142 4.41414C18.6332 3.63311 17.3668 3.63311 16.5858 4.41416L12.5858 8.41417C12.2107 8.78924 12 9.29795 12 9.82838V12H14.1716C14.702 12 15.2107 11.7893 15.5858 11.4142L19.5858 7.41413C20.3668 6.63307 20.3668 5.36674 19.5858 4.5857L19.4142 4.41414Z"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
  />
  <path
    d="M8 12H6C4.89543 12 4 12.8954 4 14C4 15.1046 4.89543 16 6 16H16C17.1046 16 18 16.8954 18 18C18 19.1046 17.1046 20 16 20H12"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
  />
</svg>

Let's take a look at how we can leverage this insight to animate some icons!
让我们来看看如何利用这一见解为一些图标添加动画！

Animating Parts of an Icon
图标的动画部分

One of the simplest icon animations you can do is animating individual parts of an icon. For example, this arrow icon that does a little bounce when you hover over it:
你可以做的最简单的图标动画之一就是为图标的每个部分添加动画。例如，当你将鼠标悬停在这个箭头图标上时，它会稍微弹跳一下：

How might we implement this?
我们该如何实施这个？

Like many icons in Figma, this icon is composed of a single vector:
像 Figma 中的许多图标一样，这个图标由一个单一的矢量组成：

vector 向量

<svg
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M14 4H20V10M14 10L19.25 4.75M10 14L4.75 19.25M4 14V20H10"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
  />
</svg>

<svg
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M14 4H20V10M14 10L19.25 4.75M10 14L4.75 19.25M4 14V20H10"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
  />
</svg>

Since we want to move these arrows in different directions, we need to split the icon so that each arrow has its own <path> element.
由于我们想将这些箭头朝不同方向移动，我们需要将图标分开，以便每个箭头都有自己的 <path> 元素。

Splitting the Vector in Figma
在 Figma 中分割矢量

One way to do this in Figma is to duplicate the vector and then delete the points that make up the arrow you don't want:

vector 向量
vector 向量

With two vectors, we get two path elements in the export, which means we can animate them individually!
通过两个向量，我们在导出中获得两个路径元素，这意味着我们可以单独动画它们！

vector 向量
vector 向量

<svg
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M10 14L4.75 19.25M4 14V20H10"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
  />
  <path
    d="M14 4H20V10M14 10L19.25 4.75"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
  />
</svg>

<svg
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M10 14L4.75 19.25M4 14V20H10"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
  />
  <path
    d="M14 4H20V10M14 10L19.25 4.75"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
  />
</svg>

Now, we can animate each individual arrow by using something like CSS animations:
现在，我们可以通过使用类似 CSS 动画的方式来为每个单独的箭头添加动画：

svg:hover #top-right {

--x: 2px;

--y: -2px;

animation: bounce 0.75s;

}

svg:hover #bottom-left {

--x: -2px;

--y: 2px;

animation: bounce 0.75s;

}

@keyframes bounce {

0% { transform: translate(0px, 0px); }

50% { transform: translate(var(--x), var(--y)); }

100% { transform: translate(0px, 0px); }

}

Constructing the SVG 构建 SVG

I want to highlight that there are a number of different ways to construct the SVG from the two vector layers.
我想强调，有多种不同的方法可以从这两个矢量图层构建 SVG。

One way is the approach we took here—export the entire frame as an SVG:
一种方法是我们在这里采取的方法——将整个框架导出为 SVG：

expand-45 扩展-45

vector 向量
vector 向量

This is the approach I generally recommend because your output will look exactly like the original icon in Figma, but it does require some know-how of how to animate SVG elements.
这是我通常推荐的方法，因为你的输出将与 Figma 中的原始图标完全相同，但这确实需要一些关于如何动画化 SVG 元素的知识。

Another approach I've seen is to export the vector layers individually, then reconstruct the SVG in code using position: absolute:
另一种我见过的方法是 单独导出矢量图层，然后在代码中重建 SVG，使用 position: absolute：

<svg

id="bottom-left"

width="50%"

viewBox="0 0 12 12"

fill="none"

xmlns="http://www.w3.org/2000/svg"

<path

d="M10.166 1.83325L2.72852 9.27075M1.66602 1.83325V10.3333H10.166"

stroke="currentColor"

stroke-width="2.5"

stroke-linecap="round"

stroke-linejoin="round"

</svg>

<svg

id="top-right"

width="50%"

viewBox="0 0 12 12"

fill="none"

xmlns="http://www.w3.org/2000/svg"

<path

d="M1.83398 1.66675H10.334V10.1667M1.83398 10.1667L9.27148 2.72925"

stroke="currentColor"

stroke-width="2.5"

stroke-linecap="round"

stroke-linejoin="round"

</svg>

</div>

This approach works great if you're unfamiliar with SVGs because you can stay in the HTML world and use CSS's animation rules, but it requires some fiddling with position and size to get the icon to look right.
这种方法非常适合不熟悉 SVG 的人，因为你可以停留在 HTML 的世界中，使用 CSS 的动画规则，但需要对图标的位置和大小进行一些调整，以使其看起来正确。

Neither approach is objectively better than the other; while I personally recommend the first approach, I recognize that some people are more efficient with the second!
两种方法在客观上没有优劣之分；虽然我个人更推荐第一种方法，但我也承认有些人使用第二种方法更高效！

Incomplete Vectors 不完整的向量

Sometimes, splitting one vector into multiple vectors isn't enough to get your code into an "animateable" state. For example, consider this color swatch animation:
有时候，将一个向量拆分成多个向量并不足以使您的代码处于“可动画”状态。例如，考虑这个颜色样本动画：

Hover me! 悬停我！

To make this animation work, we want to be able to individually change the rotation of the two color swatches in the back:
为了使这个动画有效，我们希望能够单独改变后面两个颜色样本的旋转

To support this, our Figma export needs to have three separate vectors: one for each color swatch.
为了支持这一点，我们的 Figma 导出需要有三个单独的矢量：每种颜色样本一个。

Here's the catch: with the icon as it is, the two color swatches in the back aren't even complete color swatches!
这是关键：按照现在的图标，背景中的两个颜色样本甚至不是完整的颜色样本！

Take the middle swatch, for example; if we delete the first and last swatches, we're left with this:
以中间的样本为例；如果我们删除第一个和最后一个样本，我们将得到这个：

<svg
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M11.3965 18.7499L17.1465 8.79063C17.6988 7.83405 17.371 6.61087 16.4144 6.05858L12.5 3.79858"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
  />
</svg>

<svg
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M11.3965 18.7499L17.1465 8.79063C17.6988 7.83405 17.371 6.61087 16.4144 6.05858L12.5 3.79858"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
  />
</svg>

This is an issue because it means that splitting the vector alone wouldn't work—how can we animate something that's not even drawn in Figma?
这是一个问题，因为这意味着仅仅拆分向量是行不通的——我们怎么能让一些在 Figma 中甚至没有被绘制的东西动起来呢？

Certainly, one way is to bug your designer, but another way is to recreate the icon in code. Here's the idea: because the icon is made up of three identical swatches, we'll export just the top swatch from Figma and create the rest in code.
当然，有一种方法是打扰您的设计师，但另一种方法是用代码重新创建图标。想法是这样的：因为图标由三个相同的样本组成，我们将只从 Figma 导出顶部样本，其余在代码中创建。

Exporting the top swatch alone will give us a single path element that we can work with:
单独导出顶部样本将给我们一个可以使用的单个 path 元素：

<svg
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M7.4 16.5H7.6M12 16.5V5C12 3.89543 11.1046 3 10 3H5C3.89543 3 3 3.89543 3 5V16.5C3 18.9853 5.01472 21 7.5 21C9.98528 21 12 18.9853 12 16.5ZM8 16.5C8 16.7761 7.77614 17 7.5 17C7.22386 17 7 16.7761 7 16.5C7 16.2239 7.22386 16 7.5 16C7.77614 16 8 16.2239 8 16.5Z"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
  />
</svg>

<svg
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M7.4 16.5H7.6M12 16.5V5C12 3.89543 11.1046 3 10 3H5C3.89543 3 3 3.89543 3 5V16.5C3 18.9853 5.01472 21 7.5 21C9.98528 21 12 18.9853 12 16.5ZM8 16.5C8 16.7761 7.77614 17 7.5 17C7.22386 17 7 16.7761 7 16.5C7 16.2239 7.22386 16 7.5 16C7.77614 16 8 16.2239 8 16.5Z"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
  />
</svg>

To make the middle swatch, we'll duplicate the <path> element and then rotate it around the circle:
要制作中间的样本，我们将复制 <path> 元素，然后围绕圆形旋转它：

<svg
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    id="middle-swatch"
    d="M7.4 16.5H7.6M12 16.5V5C12 3.89543 11.1046 3 10 3H5C3.89543 3 3 3.89543 3 5V16.5C3 18.9853 5.01472 21 7.5 21C9.98528 21 12 18.9853 12 16.5ZM8 16.5C8 16.7761 7.77614 17 7.5 17C7.22386 17 7 16.7761 7 16.5C7 16.2239 7.22386 16 7.5 16C7.77614 16 8 16.2239 8 16.5Z"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
  />
  <path
    d="M7.4 16.5H7.6M12 16.5V5C12 3.89543 11.1046 3 10 3H5C3.89543 3 3 3.89543 3 5V16.5C3 18.9853 5.01472 21 7.5 21C9.98528 21 12 18.9853 12 16.5ZM8 16.5C8 16.7761 7.77614 17 7.5 17C7.22386 17 7 16.7761 7 16.5C7 16.2239 7.22386 16 7.5 16C7.77614 16 8 16.2239 8 16.5Z"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
  />
</svg>

<svg
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    id="middle-swatch"
    d="M7.4 16.5H7.6M12 16.5V5C12 3.89543 11.1046 3 10 3H5C3.89543 3 3 3.89543 3 5V16.5C3 18.9853 5.01472 21 7.5 21C9.98528 21 12 18.9853 12 16.5ZM8 16.5C8 16.7761 7.77614 17 7.5 17C7.22386 17 7 16.7761 7 16.5C7 16.2239 7.22386 16 7.5 16C7.77614 16 8 16.2239 8 16.5Z"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
  />
  <path
    d="M7.4 16.5H7.6M12 16.5V5C12 3.89543 11.1046 3 10 3H5C3.89543 3 3 3.89543 3 5V16.5C3 18.9853 5.01472 21 7.5 21C9.98528 21 12 18.9853 12 16.5ZM8 16.5C8 16.7761 7.77614 17 7.5 17C7.22386 17 7 16.7761 7 16.5C7 16.2239 7.22386 16 7.5 16C7.77614 16 8 16.2239 8 16.5Z"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
  />
</svg>

#middle-swatch {
  transform: rotate(30deg);
  transform-origin: 7.5px 16.5px;
}

#middle-swatch {
  transform: rotate(30deg);
  transform-origin: 7.5px 16.5px;
}

Here, we gave the middle swatch an id of middle-swatch and then used CSS to rotate it around the point (7.5, 16.5).
在这里，我们为中间样本赋予了一个id为middle-swatch，然后使用 CSS 将其围绕点(7.5, 16.5)旋转。

Before we move on to the next swatch, we need to fix something: the top swatch should cover the middle swatch. We can fix this by adding the fill attribute to the top swatch:
在我们进入下一个样本之前，我们需要修复一些问题：最上面的样本应该覆盖中间的样本。我们可以通过给最上面的样本添加fill属性来解决这个问题：

<svg
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    id="middle-swatch"
    d="M7.4 16.5H7.6M12 16.5V5C12 3.89543 11.1046 3 10 3H5C3.89543 3 3 3.89543 3 5V16.5C3 18.9853 5.01472 21 7.5 21C9.98528 21 12 18.9853 12 16.5ZM8 16.5C8 16.7761 7.77614 17 7.5 17C7.22386 17 7 16.7761 7 16.5C7 16.2239 7.22386 16 7.5 16C7.77614 16 8 16.2239 8 16.5Z"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
        
        
          
          重试
          
        
          
          错误原因
        
        
        
    stroke-linejoin="round"
  />
  <path
    d="M7.4 16.5H7.6M12 16.5V5C12 3.89543 11.1046 3 10 3H5C3.89543 3 3 3.89543 3 5V16.5C3 18.9853 5.01472 21 7.5 21C9.98528 21 12 18.9853 12 16.5ZM8 16.5C8 16.7761 7.77614 17 7.5 17C7.22386 17 7 16.7761 7 16.5C7 16.2239 7.22386 16 7.5 16C7.77614 16 8 16.2239 8 16.5Z"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
    fill="var(--gray-1)"
  />
</svg>

<svg
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    id="middle-swatch"
    d="M7.4 16.5H7.6M12 16.5V5C12 3.89543 11.1046 3 10 3H5C3.89543 3 3 3.89543 3 5V16.5C3 18.9853 5.01472 21 7.5 21C9.98528 21 12 18.9853 12 16.5ZM8 16.5C8 16.7761 7.77614 17 7.5 17C7.22386 17 7 16.7761 7 16.5C7 16.2239 7.22386 16 7.5 16C7.77614 16 8 16.2239 8 16.5Z"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
  />
  <path
    d="M7.4 16.5H7.6M12 16.5V5C12 3.89543 11.1046 3 10 3H5C3.89543 3 3 3.89543 3 5V16.5C3 18.9853 5.01472 21 7.5 21C9.98528 21 12 18.9853 12 16.5ZM8 16.5C8 16.7761 7.77614 17 7.5 17C7.22386 17 7 16.7761 7 16.5C7 16.2239 7.22386 16 7.5 16C7.77614 16 8 16.2239 8 16.5Z"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
    fill="var(--gray-1)"
  />
</svg>

#middle-swatch {
  transform: rotate(30deg);
  transform-origin: 7.5px 16.5px;
}

#middle-swatch {
  transform: rotate(30deg);
  transform-origin: 7.5px 16.5px;
}

Keep in mind that adding the fill attribute here means the icon will no longer be transparent. It is, however, totally possible to keep the transparency while still having the top swatch cover the middle swatch—by using masks:
请记住，在这里添加 fill 属性意味着图标将不再透明。然而，保持透明度的同时仍然可以让顶部样本覆盖中间样本 - 通过使用蒙版：

<svg

width="350"

viewBox="-0.5 -0.5 25 25"

fill="none"

xmlns="http://www.w3.org/2000/svg"

<defs>

<pattern

id="main-grid"

patternUnits="userSpaceOnUse"

width="4"

height="4"

</g>

</pattern>

</defs>

<defs>

<path

d="M7.4 16.5H7.6M12 16.5V5C12 3.89543 11.1046 3 10 3H5C3.89543 3 3 3.89543 3 5V16.5C3 18.9853 5.01472 21 7.5 21C9.98528 21 12 18.9853 12 16.5ZM8 16.5C8 16.7761 7.77614 17 7.5 17C7.22386 17 7 16.7761 7 16.5C7 16.2239 7.22386 16 7.5 16C7.77614 16 8 16.2239 8 16.5Z"

fill="black"

</mask>

</defs>

<path

id="middle-swatch"

Masks are out of scope for this post, but if you're interested, you can check out the MDN documentation or my SVG course to learn more!
口罩不在此帖的范围内，但如果您感兴趣，可以查看MDN 文档或我的SVG 课程以了解更多信息！

Great! There's just one final swatch to cover. Try adding it in the sandbox below:
太好了！最后还有一个样本需要覆盖。请尝试将其添加到下面的沙盒中：

<svg

width="350"

viewBox="0 0 24 24"

fill="none"

xmlns="http://www.w3.org/2000/svg"

</g>

<path

id="bottom-swatch"

stroke="currentColor"

stroke-width="2"

stroke-linecap="round"

stroke-linejoin="round"

<path

id="middle-swatch"

stroke="currentColor"

stroke-width="2"

stroke-linecap="round"

stroke-linejoin="round"

fill="var(--gray1)"

<path

stroke="currentColor"

stroke-width="2"

stroke-linecap="round"

stroke-linejoin="round"

fill="var(--gray1)"

</svg>

With this setup, we can make the animation by animating the rotation angle of each swatch!
通过这个设置，我们可以通过动画每个样本的旋转角度来制作动画！

#middle-swatch {

transform: rotate(30deg);

transform-origin: 7.5px 16.5px;

}

#bottom-swatch {

transform: rotate(58deg);

transform-origin: 7.5px 16.5px;

}

svg:hover #middle-swatch {

animation: rotate 1s;

--stop1: 45deg;

--stop2: 16deg;

--stop3: 30deg;

}

svg:hover #bottom-swatch {

animation: rotate 1s;

--stop1: 90deg;

--stop2: 32deg;

--stop3: 58deg;

}

@keyframes rotate {

25% {

transform: rotate(var(--stop1));

}

75% {

transform: rotate(var(--stop2));

}

100% {

transform: rotate(var(--stop3));

}

A Deeper Dive into SVGs
深入探讨 SVGs

Awesome! 太棒了！

In this post, we took a closer look at how Figma exports SVGs and how we can leverage this knowledge to make the exports easier to work with. In short:
在这篇文章中，我们更加深入地探讨了 Figma 如何导出 SVG 文件，以及我们如何利用这些知识使导出更易于使用。简而言之：

vector 向量

→

<path d="..." />

Having individual <path> elements that clearly map to different parts of the icon makes it much easier to animate the icon in code.
拥有单独的 <path> 元素，清晰地映射到图标的不同部分，使得在代码中对图标进行动画处理变得 容易得多。

But what if you can't cleanly split the icon into multiple vectors? As we saw in the second example, you'll sometimes need to recreate parts of the icon in code to make it animateable. This is where things can get challenging because you have to be a bit familiar with SVGs to make things work.
但是如果你无法将图标干净地拆分成多个矢量呢？正如我们在第二个例子中看到的，有时候你需要在代码中重新创建图标的部分以使其能够动画化。这时事情可能会变得具有挑战性，因为你需要对 SVG 有一点了解，才能使事情运作。

If you're interested in getting your feet wet with SVGs, I've spent the last year or so creating a course that covers everything you need to know about SVGs and SVG animations. You can check it out right here:
如果你有兴趣接触一下 SVG，我在过去一年左右的时间里创建了一门课程，涵盖了你需要了解的关于 SVG 和 SVG 动画的所有内容。你可以在这里查看：

Interactive SVG Animations -> 交互式 SVG 动画

Understanding Figma Exports理解 Figma 导出

Animating Parts of an Icon图标的动画部分

Splitting the Vector in Figma在 Figma 中分割矢量

Constructing the SVG 构建 SVG

Incomplete Vectors 不完整的向量

A Deeper Dive into SVGs深入探讨 SVGs

Understanding Figma Exports
理解 Figma 导出

Animating Parts of an Icon
图标的动画部分

Splitting the Vector in Figma
在 Figma 中分割矢量

A Deeper Dive into SVGs
深入探讨 SVGs