使用 CSS 为 SVG 路径制作动画

不久前，我发现了一个超酷的效果，当 SVG 路径在画布上绘制时，它会以动画形式呈现。

事实证明使用 CSS 创建这个非常容易，所以让我们看看如何完成。

使用 CSS 为 SVG 路径制作动画

第一部分是创建一条 SVG 线条，我用 Sketch 画了一个三角形元素。
你可以画任何你想画的东西，甚至可以使用在线免费工具。

形状完成后，将其添加到 HTML 中。以下是我的示例，仅供参考。

<?xml version="1.0" encoding="UTF-8"?>
<svg
  width="291px"
  height="260px"
  viewBox="0 0 291 260"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
>
  <title>Path</title>
  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <path
      d="M273.097656,120.507813 C201.899566,163.577543 130.777516,213.94793 50.8398438,240.160156 C36.9248074,244.723012 17.4914196,262.184399 8.2265625,250.84375 C-1.53762975,238.89189 20.198756,222.272258 24.0078125,207.316406 C27.3670238,194.126823 28.5689142,180.441602 29.6132812,166.871094 C30.9603726,149.366986 31.1766739,131.782428 31.171875,114.226563 C31.1623478,79.3735161 8.15793288,37.1795952 29.5703125,9.6796875 C43.1473611,-7.75730878 67.7544299,32.013528 87.5742187,41.7890625 C105.639606,50.6992894 124.365537,58.2317755 143.085938,65.6679688 C150.003672,68.4158594 157.202901,70.4330349 164.40625,72.3085938 C177.173796,75.6329203 190.335014,77.4306133 202.960938,81.2578125 C220.824973,86.6728004 237.747783,94.999359 255.734375,99.9921875 C266.927708,103.099302 278.679688,103.638021 290.152344,105.460938"
      id="Path"
      stroke="#979797"
      stroke-width="10"
    ></path>
  </g>
</svg>

现在我们可以移动来为其添加动画，由于我只使用一个 SVG，所以我将代码添加到主 SVG 元素中。

我们要做的第一件事是设置笔划虚线数组及其偏移量。

svg {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  pointer-events: none;
}

虚线数组指的是虚线的宽度和到起点的偏移量。1000 比我们实际的线大，所以它将被分成 1000 个部分。

然后我们要添加一个动画，随着时间的推移消除偏移。

svg {
  animation: animateDash 2s linear forwards infinite;
}

然后我们可以创建动画来消除偏移，如上所述。

@keyframes animateDash {
  to {
    stroke-dashoffset: 0;
  }
}

就这样。我们的动画现在将运行来显示线条的绘制。

您甚至可以使用它来更改数组和偏移大小，这将影响动画的运行方式，甚至可以使其显示为虚线边框动画。

作为参考，您可以在此 CodePen 中查看结果。

感谢您的阅读，让我们联系起来！

感谢您阅读我的博客。欢迎订阅我的电子邮件简报，并在Facebook或Twitter上与我联系。

鏂囩珷鏉ユ簮锛�https://dev.to/dailydevtips1/animate-an-svg-path-with-css-4ihj