这是熟悉 SVG 语法和真实动画的一个很好的练习。我们将使用一个预制的 SVG 心脏，提醒自己是如何viewBox工作的，然后添加一个animateTransform元素来控制跳动运动。在最初的简单方法之后，我们将讨论它有什么问题并进行一些改进。最后，我还将向您展示一些替代的跳动心脏动画。让我们开始！1.创建一个心形图标在您选择的矢量工具中，绘制一个简单的心形图标。它不需要是完美的，但为了方便起见，让它成为一条连续的路径。我在 100x100 像素的画布上创建了我的，几乎填满了整个东西。

2.开始写SVG在 Codepen（或 blanco HTML 文件）中，首先编写 SVG 元素的基本内容：123svgwidth=100height=100viewBox=0 0 100 100font/fontfont/font/svg在这里，我们为 SVG 赋予了与原始画布相同的高度和宽度。我们还将 viewBox 设置为0 0 100 100.这意味着我们查看 SVG 的窗口从坐标 0 0（左上角）开始，尺寸为 100x100px，因此它与我们的 SVG 完美匹配。为了清楚地看到您正在处理的内容，添加一个 CSS 规则来为 SVG 背景着色：123svg {font/fontbackground: blue;font/font}让我们也使用 flexbox 将我们正在查看的内容居中：123456body {font/fontheight: 100vh;font/fontdisplay: flex;font/fontalign-items: center;font/fontjustify-content: center;font/font}3.添加心路现在我们需要在 SVG 中嵌套一个路径元素。从空路径开始，带有fill颜色和空d：1pathfill=tomatod=定义了一个绘制的d路径，所以让我们添加我们的路径坐标。在您粘贴到文本编辑器中的 SVG 片段中，从d属性中获取所有内容并将其粘贴到我们的空属性中。你应该得到一个看起来像这样的混乱字符串：12pathfill=tomatod=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.27zfont/font/path所有这些都将创建以下内容：

4.让你的心成长我想要一颗更大的心。通过将 SVG 的宽度和高度属性加倍，width=200 height=200我们将加倍整个物体的大小。或者我们可以将所有内容缩放 150%width=150 height=150。或者是其他东西。我们不需要触摸 viewBox 的值，因为它们会相对于我们刚刚更改的 Viewport 保持不变。5.添加一点动画为了使跳动的心脏动画化，我们将使用一个animateTransform嵌套在 SVG 中的元素。首先在 SVG 中添加元素，作为路径的兄弟：123456animateTransformfont/fontattributeName=transform font/fonttype=scale font/fontdur=1s font/fontrepeatCount=indefinitefont/font/animateTransform这将为父元素设置动画，即：整个svg.这在很多情况下都不合适，最好为 中的元素设置动画，但svg这种方法对我们来说效果很好。为了复习 animateTransform 的工作原理，Kezz（像往常一样）为您介绍了：我们使用的属性是不言自明的。我们正在创建一个持续时间为 1 秒的比例变换，它将无限期地重复。向转换添加值现在我们需要添加一个值列表，所以它知道要设置多少动画：1234567animateTransformfont/fontattributeName=transformfont/fonttype=scalefont/fontdur=1sfont/fontvalues=1; 1.5; 1.25; 1.5; 1.5; 1;font/fontrepeatCount=indefinitefont/font/animateTransform所以这里的心脏从正常大小 (1) 开始，然后缩放到1.5正常大小，然后稍微缩小到1.25，然后回到1.5，依此类推。这些值给了我们跳动的效果。6.更好的解决方案改变我们的方式有几个原因，第一个（重要的）原因是：这在许多移动浏览器上不起作用。iOS Safari 和 Chrome 只会表现出一动不动的心，因为它们不喜欢animateTransform被应用到svg元素上。保持我跳动的心斯汀此外，我们正在为整个 SVG 制作动画；在内容动画svg化的同时保持相同的比例会更有用。这是可能的我们需要稍微调整一下坐标系但这是可能的。添加包装元素并缩小首先将我们的path和animateTransform元素包装在一个组g元素中。这g就是现在动画的内容：123456svgfont/fontgfont/fontpath/pathfont/fontanimateTransform/animateTransformfont/font/gfont/font/svg我还想通过增加viewBox.这将防止我们的心超越界限，svg从而掩盖它。1svgwidth=150height=150viewBox=0 0 200 200在这一点上，svg再次给背景颜色是个好主意，所以我们可以看到发生了什么：

好吧，它有效，我们有一个 SVG 心跳，但坐标让我们感到困惑。group 元素从 0、0 缩放，而我们需要我们的心以某种方式从中心缩放。我们可以通过对 应用一个变换path，将它的一半高度向上移动一半宽度向左移动来做到这一点：1path transform=translate(-50 -42.5)结论

如何使用SVG制作跳动的心脏动画_成都网站搭建   https://cdnanqi.cn/wangzhanzhizuo/11142.html