svg 动画边框

1. 使用 svg 画一个矩形

这里设定的矩形大小为 200x100，总长度为 600。

<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100">
<path fill="transparent"
    stroke="#333"
    stroke-width="8"
    d="M 0 0 L 200 0 L 200 100 L 0 100 L 0 0"
    />
</svg>
复制代码

2. 隐藏多余的边框

stroke-dasharray 让 svg 画出的线条，以固定的模式进行绘制。 例如：stroke-dasharray: 300; 表示每画 300 个单位，就空 300 个单位，一直重复下去。

...
stroke-dasharray="300"
...
复制代码

3. 让边框动起来

stroke-dashoffset 让 svg 画出的线条的起始位置进行偏移，值可以为正，也可以为负：

1. 如果值为正，表示起始位置提前，可以看作将图形往左边拉。
2. 如果值为负，表示起始位置延后，可以看作将图形往右边拉。

我们将矩形的起始位置延后 600 个单位，然后设定动画，从 600 个单位再回到 0 个单位，就看到了边框动起来的效果。

path {
  stroke-dasharray: 300 300;
  stroke-dashoffset: 600;
  animation: dash 1s linear infinite;
}
@keyframes dash {
  from {
    stroke-dashoffset: 600;
  }
  to {
    stroke-dashoffset: 0;
  }
}
复制代码

4. 将 svg 放在需要显示动画边框的元素里面

最后，只要将 svg 元素放置在需要显示动画边框的元素里面，然后好定位即可。

完整代码：jsbin.com/dezahim/edi…