自绘制形状 - CSS-Tricks

看到一个形状在网页上自己绘制，看起来像是魔法。或者，你可能认为它是一个嵌入的视频。但事实并非如此！实际上，只需要很少的代码和一个非常聪明的技巧，利用笔划虚线和偏移量，我们就可以在任何 SVG 路径上实现它。

我们网络上最好的形状绘制工具是 SVG，特别是 <path d="" /> 元素。使用路径语法，你可以使用直线和曲线绘制命令绘制任何你想要的形状。路径可以是一个实心形状，但为了我们的目的，让我们假设该路径是 fill: none;，我们将专注于路径的 stroke，让该路径自己绘制。

假设我们有一个单独的 <path />，它可以绘制出像这样的酷炫形状

在我们的 SVG 中，我们将确保我们已经很好地设置了该路径，如下所示

<path 
  pathLength="1" 
  stroke="black"
  stroke-width="5"
  fill="none"
  d="..."
/>

就像你稍后会看到的那样，第二行将使这个技巧变得非常容易实现。

技巧本身，让形状“自己绘制”，来自这样的想法：笔划可以是虚线，你可以控制虚线的长度和偏移量。所以想象一下：你让虚线（以及虚线后的空间）非常长，以至于它覆盖了整个形状，因此看起来好像没有虚线笔划。但是，然后你将笔划再偏移那么远，因此看起来好像根本没有笔划。然后关键来了：动画化偏移量，使其看起来像形状正在自己绘制。

这就是 pathLength="1" 如此有用的原因。我们只是将偏移量从 1 动画到 0，这在 CSS 中非常容易

path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: dash 5s linear forwards;
}

@keyframes dash {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}

上面的 CSS 将适用于任何带笔划的路径，假设你正在使用 pathLength 技巧！

一个小问题：Safari。Safari 不喜欢路径上的 pathLength 属性，因此简单的 1 到 0 技巧失败了。但是，它是可以解决的。首先，我们需要弄清楚路径的自然长度（而不是强制它为 1）。我们可以通过在 DOM 中选择它来做到这一点，然后

path.getTotalLength();

在我们上面的例子中，长度是 8085。所以，我们将在 CSS 中使用该值，而不是 1。

path {
  stroke-dasharray: 8085;
  stroke-dashoffset: 8085;

  animation: dash 5s ease-in-out infinite alternate;
}

@keyframes dash {
  from {
    stroke-dashoffset: 8085;
  }
  to {
    stroke-dashoffset: 0;
  }
}

这里有一个例子，它已经包含了该值，并且可以在所有浏览器中正常工作。希望 Safari 能够让 pathLength 正常工作，因为这样就不用测量路径长度了，方便很多。

如果你想逐步了解如何使用线绘制技巧，我们已经有了，包括视频讲解版本.
还有一个很酷的想法：让形状根据滚动位置自己绘制.

更多