SVG 蚂蚁线 | CSS-Tricks

Maxim Leyzerovich 使用一些非常简单的 SVG 创建了蚂蚁线效果。

查看 CodePen 上 Maxim Leyzerovich (@round) 的作品 SVG 蚂蚁线。

让我们一点一点地将其分解，并查看所有的小部件是如何组合在一起的。

步骤 1：画一个矩形

我们可以像正方形一样设置 SVG，但忽略纵横比，并使其灵活地适应我们想要的任何矩形。

<svg viewbox='0 0 40 40' preserveAspectRatio='none'>
  <rect width='40' height='40' />
</svg>

我们立即被提醒，SVG 内部的坐标系是无单位的。在这里，我们说：“这个 SVG 是一个 40x40 的网格。现在画一个覆盖整个网格的矩形。” 不过，我们仍然可以在 CSS 中调整整个 SVG 的大小。让我们强制它正好是视口的一半

svg {
  position: absolute;
  width: 50vw;
  height: 50vh;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

步骤 2：防止变形

因为我们使框和网格如此灵活，所以我们会得到一些我们可能已经预测到的变形。假设我们的坐标系中有一个宽度为 2 的描边。当 SVG 变窄时，它仍然需要将那个窄空间分成 40 个单位。这意味着描边会非常窄。

我们可以通过告诉描边不要缩放来阻止这种情况。

rect {
  fill: none;
  stroke: #000;
  stroke-width: 10px;
  vector-effect: non-scaling-stroke;
}

现在描边将表现得更像 HTML 元素上的边框。

步骤 3：绘制交叉线

在 Maxim 的演示中，他使用四个路径元素在中间绘制线条。请记住，我们有一个 40x40 的坐标系，所以数学计算非常棒

<path d='M 20,20 L 40,40' />
<path d='M 20,20 L 00,40 '/>
<path d='M 20,20 L 40,0' />
<path d='M 20,20 L 0,0' />

这四条线都从中心 (20,20) 开始，延伸到每个角。为什么是四条线而不是两条从角到角的线？我怀疑这是因为后面的蚂蚁线动画如果所有蚂蚁都从中心辐射出来而不是交叉，看起来会更酷一些。

我喜欢 path 的简洁语法，但为了有所不同，我们只使用两条线

<line x1="0" y1="0" x2="40" y2="40"></line>
<line x1="0" y1="40" x2="40" y2="0"></line>

如果我们将描边应用到我们的 rect 和 line，它就可以工作！但是我们看到一个稍微奇怪的问题

rect, line {
  fill: none;
  stroke: #000;
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

外部线看起来比内部线更细，原因是外部矩形紧贴 SVG 的外部。因此，它外部的任何内容都会被裁剪掉。这很令人沮丧，但 SVG 中的描边总是跨越它们所在的路径，因此外部描边的一半 (0.5px) 被隐藏了。我们可以单独将矩形加倍以“修复”它

rect, line {
  fill: none;
  stroke: #000;
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

rect {
  stroke-width: 2px;
}

Maxim 还添加了 shape-rendering: geometricPrecision;，因为显然在非视网膜显示器上它可以稍微清理一下东西。

步骤 3：蚂蚁是虚线

除了奇怪的跨越线条的事情之外，SVG 描边提供了比 CSS 边框更多的控制。例如，CSS 有虚线和点状边框样式，但无法控制它们。在 SVG 中，我们可以控制虚线的长度和它们之间的间距，这要归功于 stroke-dasharray

rect, line {
  ...

  /* 8px dashes with 2px spaces */
  stroke-dasharray: 8px 2px;
}

我们甚至可以变得非常奇怪

但是蚂蚁使用 4px 的虚线和 4px 的间距看起来很好，所以我们可以使用 stroke-dasharray: 4px; 的简写形式。

步骤 5：动画化蚂蚁！

“蚂蚁线”中的“行进”部分来自动画。SVG 描边还可以通过特定距离进行偏移。如果我们选择一个正好等于虚线和间隙总长度的距离，然后动画化该距离的偏移量，我们就可以获得描边设计的平滑运动。我们之前甚至已经介绍过这一点，以创建 SVG 自行绘制的效果。

rect, line {
  ...

  stroke-dasharray: 4px;
  stroke-dashoffset: 8px;
  animation: stroke 0.2s linear infinite;
}

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

这是我们的副本和原始作品