我们将创建活动徽标的动画 svg 版本，您可以将其与今年的主题标签#BalanceforBetter一起使用。
在这个过程中，我们将学习如何使用figma及其布尔运算，以及通过animatetransform元素实现的内联 SVG 动画。
因此，前往 Figma，创建一个新文件以供使用，让我们开始吧！
在 Figma 中创建徽标
布尔运算
我们将创建徽标插图的方式是绘制多个形状，然后通过布尔运算将它们组合起来。您会在 Figma 顶部工具栏的中间找到布尔运算。我们将使用联合选择 和减法选择 操作，当我们逐步完成教程时，您将看到它们各自的作用。
主圈
首先使用椭圆工具绘制一个300px宽为的圆圈300px，填充颜色为#46296E。
创建另一个圈子，这次180px是180px。
通过单击一个形状，按住Shift，然后单击另一个形状来选择您的第一个和第二个圆圈。使用右侧边栏顶部的对齐工具垂直和水平对齐两个圆，使它们的中心在同一位置。
然后，在两个形状仍处于选中状态的情况下， 从布尔操作菜单中选择减去选择。
当您使用减法布尔运算时，最顶部项目的形状将从较低项目的形状中减去。这会在我们原来的圆形中创建一个空心中心。
左下切口
现在我们将在徽标的左下方创建细长的矩形切口部分。
使用矩形工具，画出一个14px宽100px高的矩形。
将矩形旋转-45 degrees。您可以通过在右侧边栏中的形状旋转字段中输入正确的图形来执行此操作。
然后将矩形放在圆的左下角。
选择矩形和圆形，然后再次 从布尔操作菜单中选择减去选择以生成剪切效果。
箭头三角形
接下来我们将制作箭头形状的三角形头部，以及匹配的三角形切口。
为了确保我们最终得到一个具有完美直角的三角形，我们将使用矩形工具而不是使用多边形工具。画出一个以 为边的72px正方形72px。#46296E它应该与我们迄今为止使用的紫色相同。
我们需要删除正方形的一个节点，才能把它变成一个直角三角形。通过双击方块或从布尔操作所在的同一顶部菜单部分中选择“编辑对象”菜单项进入节点编辑模式。
进入节点编辑模式后，使用移动工具选择右下角模式。因为我们需要删除这个节点，你可能会认为你应该按下退格键或删除按钮，但如果你这样做只会让剩下的三个节点保持打开状态而没有填充。
相反，请按Shift + Backspace使用删除和修复选择功能，该功能将在删除节点时关闭形状。
单击顶部菜单左侧的蓝色完成按钮以完成编辑此形状。
将三角形移到我们圆形的右上角。
我们将需要一个三角形来形成箭头，另一个来从圆形中切出一个匹配的三角形。为此，通过选择它然后按Ctrl + D复制三角形。将副本向上和向左移动大约 6 个像素。
通过单击图层面板中的眼睛图标暂时隐藏第一个三角形（下部），以便我们可以更清楚地看到重复的三角形。
选择复制的三角形和主圆形，并使用布尔操作菜单中的减去选择来创建此剪切效果：
将原始三角形设置为再次显示，选择它和主圆形，然后通过从布尔操作菜单中选择联合选择将两者结合起来。这完成了我们的箭头区域。
右下切口
现在我们可以继续在圆的右下角创建一个小的圆形末端十字形切口。
首先，绘制一个12px宽高的矩形，并通过右侧边栏中形状的角半径80px字段增加圆角，直到您看到角没有变得更圆。（或更高）。这将在矩形的任一端创建完美的圆形帽。6px
复制圆角矩形，将其高度更改为50px，然后将其旋转90 degrees。选择这两个形状并按右侧边栏顶部的“水平居中对齐”按钮将它们水平对齐。将这个新矩形放置在第一个矩形底部附近，如下所示：
通过选择它们并从布尔运算菜单中选择联合选择来组合这两个形状。然后选择新统一的形状并将其旋转45 degrees。
将形状放在右下角的主要圆形上，如下所示：
选择十字形和主圆形后，从布尔操作菜单中选择减去选择以进行最终剪切。
您完成的徽标应如下所示：
关于“扁平化”和 SVG 的注意事项
此时，您将在图层面板中拥有一系列嵌套形状，由各种布尔运算组合而成。您可以选择右键单击插图，选择Flatten，然后嵌套将折叠成一个图层。在许多情况下，这将比具有多个嵌套形状更可取。
然而，在我们的例子中，它会创建两个独立的部分，左上半部分和右下半部分，然后这些部分将依次转换为 SVG 代码中的两个路径元素。因此，我们将保持嵌套形状不变，因为当我们将其转换为代码时，Figma 会给我们一个单一的路径，这更容易制作动画。
翻译成代码
插图完成后，我们现在准备将其转换为 SVG 并将其嵌入到 html 页面中以进行动画处理。
设置 HTML
让我们从创建 HTML 文档开始。创建一个名为 index.html 的文件并添加以下代码：
<!DOCTYPE html> <html> <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>
这只是一个基本的 shell，我们style为一些 CSS 准备了一组标签，并且我们正在加载我们稍后将使用的 Google 字体。
转换为 SVG
Figma 使我们的插图转换为 SVG 变得非常快速和容易。只需右键单击图像并选择Copy as > Copy as SVG。
然后将生成的代码粘贴到bodyHTML 部分。
<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之间添加我们的元素。/删除当前路径标记末尾的正斜杠 ( )，然后在其后添加一个结束</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的300形状中间。to="-360 150 150"
动画结束点的坐标，再次表示旋转度数和中心的x位置y。我们将中心留在同一位置，并将完成旋转的度数设置-360为完整旋转。负值使旋转逆时针旋转，箭头指向的方向。begin="0s"
将此值设置为0秒意味着动画将立即开始。如果使用正数，则会导致动画启动延迟。dur="10s"
在这里，我们将持续时间设置为10秒，因此动画的速度相当慢。repeatCount="indefinite"
将此值设置为indefinite意味着动画将无限循环
当您刷新浏览器时，您应该会看到徽标在旋转。
调整viewBox以防止剪裁
如上图所示，当箭头在 SVG 的外边缘附近旋转时，它会被剪掉。为了解决这个问题，我们将调整viewBox. 通过调整，viewBox我们基本上可以将矢量图像缩小一点。
将开始标签viewBox上的值调整为，如下所示：svg-20 -20 340 340
<svg width="300" height="300" viewBox="-20 -20 340 340" fill="none" xmlns="http://www.w3.org/2000/svg">
前两个数字控制形状的“平移”，后两个数字控制“缩放”。
通过将最后两个数字设置为340and 340，我们有效地告诉 SVG在and属性提供的by of 空间中向我们显示相当于340pxby 340pxof image 的内容。为了实现这一点，SVG 必须被缩小或“缩小”，为我们在 logo 周围留出一些空间。300px300pxwidthheight
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- “内联”部分意味着它仍然会像文本一样运行，但“块”部分让我们可以更好地控制其间距和对齐方式。将其设置
font-family为“Open Sans”，并带有一堆备用字体。设置字体大小。
在内部添加一些
padding，这样紫色背景就不会与文本边缘齐平。设置为
marginSVG0和文本之间没有太多空间。
刷新，您完成的页面应如下所示：
包起来
您的最终代码应为：
<!DOCTYPE html> <html> <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、创建 SVG 和通过animateTransform.
- 布尔运算
- 主圈
- 左下切口
- 箭头三角形
- 右下切口
- 关于“扁平化”和 SVG 的注意事项
- 设置 HTML
- 转换为 SVG
- 添加动画
- 调整viewBox以防止剪裁
- 添加文字
![如何删除Word中的空白页[4种简单方法]](https://www.weixiaolive.com/en/zb_users/upload/2023/07/20230702124855168827333590644.png "如何删除Word中的空白页[4种简单方法]")
