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

最新推荐文章于 2025-06-09 12:01:25 发布

翻译最新推荐文章于 2025-06-09 12:01:25 发布 · 1.1k 阅读

文章标签：

#css #python #css3 #java #canvas

这篇博客介绍如何利用SVG创建一个动画的跳动心脏，包括绘制心形图标、编写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集中我们正在查看的内容：

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

3.添加心脏路径

现在我们需要在SVG中嵌套路径元素。从空路径开始，以fill颜色和空d ：

<path fill="tomato" d="">

d定义了绘制的路径，因此让我们向其添加路径坐标。在您粘贴到文本编辑器的SVG代码段中，将d属性中的所有内容粘贴到我们的空属性中。您应该以一个混乱的字符串结尾，如下所示：

<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">
</path>

所有这些都会创建以下内容：

4.让你的心成长

我想要更大的心。

通过将SVG的width和height属性加倍到width="200" height="200"我们将使整个对象的大小加倍。或者我们可以按150％ width="150" height="150"缩放所有内容。或者是其他东西。我们不必触摸viewBox值，因为它们将相对于我们刚刚更改的Viewport保持相对。

5.添加动画效果

为了对心脏进行动画处理，我们将使用嵌套在SVG中的animateTransform元素。

首先在SVG内部添加元素，作为路径的同级元素：

<animateTransform 
    attributeName="transform" 
    type="scale" 
    dur="1s" 
    repeatCount="indefinite">
</animateTransform>

我们使用的属性是不言而喻的。我们正在创建一个持续时间为1s的缩放变换，该变换将无限期地重复。

将值添加到变换

现在我们需要添加一个值列表，这样它就知道要进行多少动画处理：

<animateTransform
      attributeName="transform"
      type="scale"
      dur="1s"
      values="1; 1.5; 1.25; 1.5; 1.5; 1;"
      repeatCount="indefinite">
</animateTransform>

因此，这里的心脏从正常大小（ 1 ）开始，然后缩放到1.5正常大小，然后再减小到1.25 ，然后又回到1.5 ，依此类推。这些值给我们带来了跳动的效果。

注意：每个值占用我们设置的1秒计时的相等部分。就像您想象的那样，运动似乎会加速和减速，具体取决于每个步骤需要进行多少缩放。

在薰衣草色的背景下，我们拥有一颗跳动的心！

6.更好的解决方案

改变我们处理方式的原因有两个，第一个（重要的）原因是：在许多移动浏览器中都无法使用。 iOS Safari和Chrome只会显示一动不动的心，因为它们不喜欢将animateTransform应用于<svg>元素。

“仍然是我跳动的心脏” – 斯特恩

另外，我们正在对整个SVG进行动画处理；在将<svg>的内容设置为动画时，将其保持在相同的比例会更有用。这是可能的-我们需要稍微处理一下坐标系-但这是可能的。

添加包装元素并缩小

首先将我们的<path>和<animateTransform>元素包装在一组<g>元素中。现在，该<g>将被动画化：

<svg>
    <g>
        <path></path>
        <animateTransform ></animateTransform>
    </g>
</svg>

我还想通过增加viewBox的大小来“缩小”。这将防止我们的心脏超出<svg> ，从而掩盖它。

<svg width="150" height="150" viewBox="0 0 200 200">

此时，最好再次给<svg>背景颜色，这样我们就可以看到发生了什么：

好吧，它有效，但是坐标使我们感到混乱。 group元素从0，0开始缩放，而我们需要我们的心从中心开始缩放。为此，我们可以对<path>进行转换，将其向上移动一半高度，向左移动一半宽度：

<path transform="translate(-50 -42.5)"

这是发生了什么：

为了补偿<path>在视口边界之外移动，现在让我们在另一个方向上偏移<g> 。我们的viewBox是200x200，因此我们需要将组移动到一半：

<g transform="translate(100 100)">

这是我们的目标（如果您仍在注意，那就做得好！）：

另外，移动viewBox的坐标将具有相同的效果：

<svg width="150" height="150" viewBox="-100 -100 200 200">

如果SVG坐标使您的头部旋转，请看一下Sara Soueidan在该主题上写的内容。

另一个属性

为了<animateTransform>能够转换<g> ，我们需要向<animateTransform>添加另一个属性：

additive="sum"

这样可以有效地将动画中的变换值添加到<g>本身声明的变换值上，从而阻止一个覆盖另一个。理解起来可能是一个令人困惑的属性，并且可能引发一些意外的结果，但是在我们的情况下，它可以完美地工作！

“ [[additive =“ sum”]指定动画将添加到属性和其他优先级较低的动画的基础值。” – MDN

我们完成了！

结论

我必须说实话，我喜欢这个最终结果！这是一个简单但有效的动画，为我们提供了练习SVG技能的绝好机会。这就是我们创建的内容（转到CodePen，花点心思！）

翻译自: https://webdesign.tutsplus.com/tutorials/how-to-make-an-animated-beating-heart-with-svg--cms-32759

d3 svg拖拽跳动