d3 svg拖拽跳动_如何使用SVG制作动感的心脏跳动

d3 svg拖拽跳动

今天是情人节！ 因此，让我们进入事物的精神，在此过程中变粉红色和模糊不清，并使用SVG为自己编写一个简单的动画跳动的心脏。

这是我们要创建的：

这是使您熟悉SVG语法和真实动画的绝佳练习。 我们将以预制的SVG心脏为基础，提醒自己viewBox工作原理，然后添加animateTransform元素来控制跳动。 在最初的“简单”方法之后，我们将讨论它的问题并进行一些改进。 让我们开始！

1.创建一个心形图标

在选择的矢量工具中，绘制一个简单的心脏图标。 它并不一定是完美的，但是为了简便起见，使其成为一条连续的道路。 我在100x100px的画布上创建了我的游戏，几乎填满了整个内容。

如果要使用我的Illustrator版本和SVG版本，请下载它们。

复制并粘贴到文本编辑器中

如今，在大多数矢量应用程序中，您可以复制对象并将生成的SVG代码粘贴到文本编辑器中。 对心脏对象也是如此。 稍后我们将回到此SVG代码段。

2.开始编写SVG

在Codepen（或blanco HTML文件）中，首先编写SVG元素的基本内容：

<svg width="100" height="100" viewBox="0 0 100 100">
  
</svg>

在这里，我们为SVG提供了与原始画布相同的高度和宽度。 我们还将viewBox设置为0 0 100 100 。 这意味着我们正在查看SVG的窗口从坐标0 0（左上角）开始，尺寸为100x100px，因此它与SVG完美匹配。

为了清楚地了解您要处理的内容，请添加CSS规则为SVG背景上色：

svg {
  background: blue;
}

我们还使用flexbox集中我们正在查看的内容：