这是熟悉 SVG 语法和真实动画的一个很好的练习。永兴集团将使用一个预制的 SVG 心脏，提醒自己是如何viewBox工作的，然后添加一个 animateTransform元素来控制跳动运动。在最初的“简单”方法之后，永兴集团将讨论它有什么问题并进行一些改进。最后，我还将向您展示一些替代的跳动心脏动画。让永兴集团开始！
1.
创建一个心形图标
在您选择的矢量工具中，绘制一个简单的心形图标。它不需要是完美的，但为了方便起见，让它成为一条连续的路径。我在 100x100 像素的画布上创建了我的，几乎填满了整个东西。
2.开始写SVG
在 Codepen（或 blanco HTML 文件）中，首先编写 SVG 元素的基本内容：
1
2
3 |
<svg width="100" height="100" viewBox="0 0 100 100"><font>font>
<font>font>
svg> |
在这里，永兴集团为 SVG 赋予了与原始画布相同的高度和宽度。永兴集团还将 viewBox 设置为0 0 100 100. 这意味着永兴集团查看 SVG 的窗口从坐标 0 0（左上角）开始，尺寸为 100x100px，因此它与永兴集团的 SVG 完美匹配。
为了清楚地看到您正在处理的内容，添加一个 CSS 规则来为 SVG 背景着色：
1
2
3 |
svg {
background: blue;
} |
让永兴集团也使用 flexbox 将永兴集团正在查看的内容居中：
1
2
3
4
5
6 |
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
} |
3. 添加心路
现在永兴集团需要在 SVG 中嵌套一个路径元素。从空路径开始，带有fill颜色和空d：
| 1 |
<path fill="tomato" d=""> |
定义了一个绘制的d路径，所以让永兴集团添加永兴集团的路径坐标。在您粘贴到文本编辑器中的 SVG 片段中，从d属性中获取所有内容并将其粘贴到永兴集团的空属性中。你应该得到一个看起来像这样的混乱字符串：
1
2 |
<path fill="tomato" d="M92.71,7.27L92.71,7.27c-9.71-9.69-25.46-9.69-35.18,0L50,14.79l-7.54-7.52C32.75-2.42,17-2.42,7.29,7.27v0 c-9.71,9.69-9.71,25.41,0,35.1L50,85l42.71-42.63C102.43,32.68,102.43,16.96,92.71,7.27z"><font>font>
path> |
所有这些都将创建以下内容：
4. 让你的心成长
我想要一颗更大的心。
通过将 SVG 的宽度和高度属性加倍，width="200" height="200"永兴集团将加倍整个物体的大小。或者永兴集团可以将所有内容缩放 150% width="150" height="150"。或者是其他东西。永兴集团不需要触摸 viewBox 的值，因为它们会相对于永兴集团刚刚更改的 Viewport 保持不变。
5. 添加一点动画
为了使跳动的心脏动画化，永兴集团将使用一个animateTransform嵌套在 SVG 中的元素。
首先在 SVG 中添加元素，作为路径的兄弟：
1
2
3
4
5
6 |
<animateTransform font>
attributeName="transform" <font>font>
type="scale" <font>font>
dur="1s" <font>font>
repeatCount="indefinite"><font>font>
animateTransform> |
这将为父元素设置动画，即：整个
