svg动画定位到动画结束点_为2019年国际妇女节创建SVG动画徽标

daique1908

墨衍会员 · AI 创作全网分发码龄10年

关注

翻译最新推荐文章于 2026-11-04 20:39:02 发布 539 阅读 AI 写同款· GEO 优化 ›

svg动画定位到动画结束点

为了庆祝2019年国际妇女节，我们将创建活动徽标的SVG版本动画，您可以将其与今年的#BalanceforBetter标签一起使用 。

在此过程中，我们将学习有关如何使用Figma及其布尔操作以及通过animateTransform元素使用内嵌SVG动画的知识。

这是我们将要创建的：

因此，前往Figma，创建一个新文件进行操作，然后开始吧！

在Figma中创建徽标

布尔运算

我们创建徽标插图的方式是绘制多个形状，然后通过布尔操作将它们组合起来。您可以在Figma顶部工具栏的中间找到布尔操作。我们将使用联盟选择和S ubtract选择 操作，当我们逐步完成本教程时，您将看到它们各自的作用。

主圈

首先抓取椭圆工具，然后画一个300px宽乘300px的圆圈，填充颜色为#46296E 。

创建另一个圆，这次为180px x 180px 。

通过单击一个形状，按住Shift ，然后单击另一个形状，选择第一和第二个圆。使用右侧工具栏顶部的对齐工具，垂直和水平对齐两个圆，使其中心位于同一位置。

然后，在仍选择两个形状的情况下，从布尔操作菜单中选择“ 减去选择 ”。

当您使用减法布尔运算时，最上面的项目的形状将从下面的项目的形状中减去。这将在我们原来的圆形中创建一个空心中心。

左下切口

现在，我们将在徽标的左下方创建细长的矩形切口部分。

使用矩形工具，画出一个矩形14px由宽100px高。

将矩形旋转-45 degrees 。您可以通过在右侧边栏中的形状的旋转字段中输入正确的图形来执行此操作。

然后将矩形放置在圆的左下角。

选择矩形和圆形，然后再次从布尔操作菜单中选择“ 减去选择 ”以生成剪切效果。

箭头三角形

接下来，我们将制作箭头形状的三角形头部，以及匹配的三角形切口。

为了确保我们最终得到一个具有完美直角的三角形，我们将使用矩形工具，而不是使用多边形工具。画出一个72px x 72px 。它应该与我们到目前为止一直使用的#46296E具有相同的紫色。

我们需要删除正方形的节点之一才能将其变成直角三角形。通过双击正方形或从布尔操作所在的同一顶部菜单部分中选择“ 编辑对象”菜单项，进入节点编辑模式。

进入节点编辑模式后，使用“ 移动”工具选择右下角的模式。因为我们需要删除该节点，所以您可能会认为应该按Backspace或Delete按钮，但是如果这样做，则将剩下的三个节点保持打开状态而没有填充。

而是按Shift + Backspace键使用“ 删除和修复”选择功能，该功能将在删除节点时关闭形状。

单击顶部菜单左侧的蓝色“完成”按钮以完成此形状的编辑。

将三角形移到圆形的右上角。

我们需要一个三角形来形成箭头，另一个需要从圆形中切出匹配的三角形。为此，通过选择三角形然后按Ctrl + D来复制三角形。将副本向上和向左移动约6个像素。

通过在“图层”面板中单击其眼睛图标，暂时隐藏第一个三角形（下一个），以便我们可以更清晰地看到重复的三角形。

选择重复的三角形和主圆形状，然后使用布尔运算菜单中的“ 减法选择 ”来创建此切口效果：

将原始三角形设置为再次显示，选择它和主要的圆形，然后通过从布尔操作菜单中选择“并集选择”来组合两者。这样就完成了我们的箭头区域。

右下切口

现在，我们可以继续在圆的右下角创建一个小的圆形末端，十字形切口。

首先，绘制一个矩形12px宽80px高，而且增加了角落通过形状的角半径场右侧边栏中的舍入，直到你看到的角落都没有得到任何全才。（6 6px或更高）。这将在矩形的任意一端创建完美的圆形帽。

复制圆角矩形，将其高度更改为50px ，然后将其旋转90 degrees 。选择这两种形状，然后按右侧栏顶部的“ 对齐水平中心”按钮将它们水平对齐。将此新矩形放置在第一个矩形的底部附近，如下所示：

通过选择两个形状并从布尔操作菜单中选择“ 联合选择”来组合这两个形状。然后选择新统一的形状并将其旋转45 degrees 。

将形状放在右下角的主圆形状上，如下所示：

选择十字形和主圆形状后，从布尔操作菜单中选择“ 减法选择 ”以进行最终切除。

完成的徽标应如下所示：

关于“ Flatten”和SVG的注意事项

此时，您将在“图层”面板中拥有一系列嵌套的形状，并通过各种布尔操作进行组合。您可以选择右键单击插图，选择Flatten ，然后嵌套将折叠为单个图层。在许多情况下，这比具有多个嵌套形状更好。

但是，在我们的示例中，它将创建两个单独的部分，即左上半部分和右下半部分，然后将它们转换为SVG代码中的两个路径元素。这样，我们将保留嵌套形状，因为当我们将其转换为代码后不久，Figma将为我们提供一条路径，该路径更易于制作动画。

翻译成代码

完成插图后，我们现在可以将其转换为SVG并将其嵌入HTML页面进行动画处理。

设置HTML

让我们从创建HTML文档开始。创建一个名为index.html的文件并添加以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Animated SVG Logo</title>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:700" rel="stylesheet"> 
  <style>

  </style>
</head>
<body>
  


</body>
</html>

这只是一个基本的外壳，在外壳中我们准备了一些style标签，可以用于一些CSS，并且正在加载我们稍后将要使用的Google字体。

转换为SVG

Figma使我们的插图转换为SVG非常快捷和容易。只需右键单击图像，然后选择“ 复制为” >“ 复制为SVG” 。

然后将生成的代码粘贴到HTML的body部分。

<svg width="300" height="300" viewBox="0 0 300 300" fill="none" xmlns="https://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M150 300C232.843 300 300 232.843 300 150C300 113.671 287.085 80.3588 265.596 54.4036L281 39H209V111L222.854 97.1464C233.639 111.987 240 130.251 240 150C240 167.559 234.972 183.943 226.277 197.791L239.293 210.808L248.485 201.615C250.829 199.272 254.628 199.272 256.971 201.615C259.314 203.958 259.314 207.757 256.971 210.101L247.778 219.293L253.246 224.761C255.589 227.104 255.589 230.903 253.246 233.246C250.903 235.589 247.104 235.589 244.761 233.246L239.293 227.778L230.101 236.971C227.757 239.314 223.958 239.314 221.615 236.971C219.272 234.628 219.272 230.829 221.615 228.485L230.808 219.293L219.138 207.623C202.628 227.41 177.785 240 150 240C129.343 240 110.311 233.04 95.1213 221.338L52.4815 263.978C78.7044 286.435 112.768 300 150 300ZM202 76.5336V33H243.875C218.176 12.3536 185.531 0 150 0C67.1573 0 0 67.1573 0 150C0 190.572 16.1078 227.382 42.2772 254.383L84.7124 211.948C69.3968 195.812 60 174.003 60 150C60 100.294 100.294 60 150 60C169.372 60 187.315 66.1206 202 76.5336Z" fill="#46296E"/>
</svg>

在<style>...</style>标记之间添加此CSS，以便我们将SVG垂直居中，并在其上方留出一些空间。

svg {
  display: block;
  margin: 50px auto;
}

在浏览器中预览文件，您应该会看到SVG图像出现：

添加动画

现在，我们可以对SVG进行动画处理以使其缓慢旋转。我们将使用animateTransform元素执行此操作，该元素可以放置在SVG形状的开始和结束标签之间。

我们粘贴的代码当前具有一个自闭合路径元素，即：

<path... />

我们需要更改它，以便我们有一对<path></path>标记，可以在animateTransform之间添加animateTransform元素。删除当前路径标记末尾的正斜杠（ / ），然后在其后添加一个结束</path>标记。

现在，我们的路径元素已准备好进行动画处理。将以下代码粘贴在</path>标记之前：

<animateTransform attributeName="transform"
  type="rotate"
  from="0 150 150"
  to="-360 150 150"
  begin="0s"
  dur="10s"
  repeatCount="indefinite"
  />

生成的SVG代码应如下所示：

<svg width="300" height="300" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg">
  
  <path fill-rule="evenodd" clip-rule="evenodd" d="M150 300C232.843 300 300 232.843 300 150C300 113.671 287.085 80.3588 265.596 54.4036L281 39H209V111L222.854 97.1464C233.639 111.987 240 130.251 240 150C240 167.559 234.972 183.943 226.277 197.791L239.293 210.808L248.485 201.615C250.829 199.272 254.628 199.272 256.971 201.615C259.314 203.958 259.314 207.757 256.971 210.101L247.778 219.293L253.246 224.761C255.589 227.104 255.589 230.903 253.246 233.246C250.903 235.589 247.104 235.589 244.761 233.246L239.293 227.778L230.101 236.971C227.757 239.314 223.958 239.314 221.615 236.971C219.272 234.628 219.272 230.829 221.615 228.485L230.808 219.293L219.138 207.623C202.628 227.41 177.785 240 150 240C129.343 240 110.311 233.04 95.1213 221.338L52.4815 263.978C78.7044 286.435 112.768 300 150 300ZM202 76.5336V33H243.875C218.176 12.3536 185.531 0 150 0C67.1573 0 0 67.1573 0 150C0 190.572 16.1078 227.382 42.2772 254.383L84.7124 211.948C69.3968 195.812 60 174.003 60 150C60 100.294 100.294 60 150 60C169.372 60 187.315 66.1206 202 76.5336Z" fill="#46296E">
  <animateTransform attributeName="transform"
    type="rotate"
    from="0 150 150"
    to="-360 150 150"
    begin="0s"
    dur="10s"
    repeatCount="indefinite"
    />
  </path>
</svg>

让我们快速看一下animateTransform元素中的属性通过我们设置的值做什么：

type="rotate"
动画旋转，而不是缩放或平移
from="0 150 150"
动画起点的坐标。这三个值中的第一个是初始旋转角度，而第二个和第三个值是中心的x和y位置。我们从0度旋转开始，将两个方向的中心都设置为150 ，因为该位置正好在300 x 300形状的中间。
to="-360 150 150"
动画终点的坐标，再次表示旋转度以及中心的x和y位置。我们将中心留在同一位置，并将完成旋转的度数设置为-360以进行完整旋转。负值使旋转沿箭头指向的方向逆时针旋转。
begin="0s"
将此值设置为0秒意味着动画将立即开始。如果使用正数，将导致动画启动延迟。
dur="10s"
在这里，我们将持续时间设置为10秒，因此动画的速度相当慢。
repeatCount="indefinite"
将此值设置为indefinite意味着动画将无限循环

刷新浏览器时，您应该会看到徽标旋转。

调整
`viewBox`以防止剪切

如上图所示，当箭头在SVG的外边缘附近旋转时，它会被剪掉。为了解决这个问题，我们将调整viewBox 。通过调整viewBox我们实际上可以稍微缩小矢量图像。

将svg开头标签的viewBox值调整为-20 -20 340 340 ，如下所示：

<svg width="300" height="300" viewBox="-20 -20 340 340" fill="none" xmlns="http://www.w3.org/2000/svg">

前两个数字控制形状的“平移”，后两个数字控制形状的“缩放”。

通过将最后两个数字分别设置为340和340 ，我们可以有效地告诉SVG向我们显示由width和height属性提供的300px x 300px空间中的340px x 340px图像。为此，必须缩小或“缩小” SVG，以便在徽标周围留出一些空间。

然后，我们使用前两个数字将图像上下“平移” 20px 。如果我们不这样做，图像将停留在viewBox左上角，并在旋转时继续在其顶部和左侧被剪切。这种“平移”为我们提供了周围的空白空间，并且当图像旋转时，箭头不再被剪切。

完成的动画SVG如下所示：

添加文字

现在，我们将在动画下方添加一些小文本，并带有2019年国际妇女节的标签。将以下代码粘贴到SVG下方：

<h1>#BalanceforBetter</h1>

并通过在样式标签中添加以下CSS来设置样式：

body {
  text-align: center;
}
h1 {
  background: #46296E;
  color: #fff;
  display: inline-block;
  font-family: 'Open Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 42px;
  padding: 0.2em 0.5em;
  margin: 0;
}

使用此CSS，我们可以执行以下操作：

通过body标签将文本居中对齐。
通过h1标签将其背景设置为紫色，文本颜色设置为白色。
将显示设置为inline-block “ inline”部分表示它仍将像文本一样工作，但是“ block”部分使我们能够更好地控制其间距和对齐方式。
将font-family设置为“ Open Sans”，并带有一堆后备字体。
设置字体大小。
在内部周围添加一些padding ，以便紫色背景不会与文本边缘齐平。
将margin设置为0以便SVG和文本之间没有太多空间。

刷新，您完成的页面应如下所示：

结语

您的最终代码应为：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Animated SVG Logo</title>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:700" rel="stylesheet"> 
  <style>
    svg {
      display: block;
      margin: 50px auto;
    }
    body {
      text-align: center;
    }
    h1 {
      background: #46296E;
      color: #fff;
      display: inline-block;
      font-family: 'Open Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      font-size: 42px;
      padding: 0.2em 0.5em;
      margin: 0;
    }
  </style>
</head>
<body>
  
  <svg width="300" height="300" viewBox="-20 -20 340 340" fill="none" xmlns="http://www.w3.org/2000/svg">
    
    <path fill-rule="evenodd" clip-rule="evenodd" d="M150 300C232.843 300 300 232.843 300 150C300 113.671 287.085 80.3588 265.596 54.4036L281 39H209V111L222.854 97.1464C233.639 111.987 240 130.251 240 150C240 167.559 234.972 183.943 226.277 197.791L239.293 210.808L248.485 201.615C250.829 199.272 254.628 199.272 256.971 201.615C259.314 203.958 259.314 207.757 256.971 210.101L247.778 219.293L253.246 224.761C255.589 227.104 255.589 230.903 253.246 233.246C250.903 235.589 247.104 235.589 244.761 233.246L239.293 227.778L230.101 236.971C227.757 239.314 223.958 239.314 221.615 236.971C219.272 234.628 219.272 230.829 221.615 228.485L230.808 219.293L219.138 207.623C202.628 227.41 177.785 240 150 240C129.343 240 110.311 233.04 95.1213 221.338L52.4815 263.978C78.7044 286.435 112.768 300 150 300ZM202 76.5336V33H243.875C218.176 12.3536 185.531 0 150 0C67.1573 0 0 67.1573 0 150C0 190.572 16.1078 227.382 42.2772 254.383L84.7124 211.948C69.3968 195.812 60 174.003 60 150C60 100.294 100.294 60 150 60C169.372 60 187.315 66.1206 202 76.5336Z" fill="#46296E">
    <animateTransform attributeName="transform"
      type="rotate"
      from="0 150 150"
      to="-360 150 150"
      begin="0s"
      dur="10s"
      repeatCount="indefinite"
      />
    </path>
  </svg>

  <h1>#BalanceforBetter</h1>

</body>
</html>

看看这个！

希望您掌握了一些使用Figma，创建animateTransform并通过animateTransform动画的有用提示。