这是熟悉 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 {<font></font>
background: blue;<font></font>
} |
让我们也使用 flexbox 将我们正在查看的内容居中：
1
2
3
4
5
6 |
body {<font></font>
height: 100vh;<font></font>
display: flex;<font></font>
align-items: center;<font></font>
justify-content: center;<font></font>
} |
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></font>
attributeName="transform" <font></font>
type="scale" <font></font>
dur="1s" <font></font>
repeatCount="indefinite"><font></font>
</animateTransform> |
这将为父元素设置动画，即：整个 <svg>. 这在很多情况下都不合适，最好为 中的元素设置动画，但<svg>这种方法对我们来说效果很好。为了复习 animateTransform 的工作原理，Kezz（像往常一样）为您介绍了：
我们使用的属性是不言自明的。我们正在创建一个持续时间为 1 秒的比例变换，它将无限期地重复。
向转换添加值
现在我们需要添加一个值列表，所以它知道要设置多少动画：
1
2
3
4
5
6
7 |
<animateTransform<font></font>
attributeName="transform"<font></font>
type="scale"<font></font>
dur="1s"<font></font>
values="1; 1.5; 1.25; 1.5; 1.5; 1;"<font></font>
repeatCount="indefinite"><font></font>
</animateTransform> |
所以这里的心脏从正常大小 ( 1) 开始，然后缩放到1.5正常大小，然后稍微缩小到1.25，然后回到1.5，依此类推。这些值给了我们跳动的效果。
6. 更好的解决方案
改变我们的方式有几个原因，第一个（重要的）原因是：这在许多移动浏览器上不起作用。iOS Safari 和 Chrome 只会表现出一动不动的心，因为它们不喜欢animateTransform被应用到<svg>元素上。
“保持我跳动的心”——斯汀
此外，我们正在为整个 SVG 制作动画；在内容动画<svg>化的同时保持相同的比例会更有用。这是可能的——我们需要稍微调整一下坐标系——但这是可能的。
添加包装元素并缩小
首先将我们的<path>和<animateTransform>元素包装在一个组<g>元素中。这<g>就是现在动画的内容：
1
2
3
4
5
6 |
<svg><font></font>
<g><font></font>
<path></path><font></font>
<animateTransform ></animateTransform><font></font>
</g><font></font>
</svg> |
我还想通过增加viewBox. 这将防止我们的心超越界限，<svg>从而掩盖它。
| 1 |
<svg width="150" height="150" viewBox="0 0 200 200"> |
在这一点上，<svg>再次给背景颜色是个好主意，所以我们可以看到发生了什么：
好吧，它有效，我们有一个 SVG 心跳，但坐标让我们感到困惑。group 元素从 0、0 缩放，而我们需要我们的心以某种方式从中心缩放。我们可以通过对 应用一个变换<path>，将它的一半高度向上移动一半宽度向左移动来做到这一点：
| 1 |
<path transform="translate(-50 -42.5)" |
结论
