SVG使用遮罩和动画实现边框流动效果

制作坐标系

为了更加直观及方便绘制，现使用两层嵌套patterns绘制5*5 × 5*5坐标系：

画一个边框

绘制一个边框：

新增描边

为了使描边与现有的边框互不影响，这里需要再绘制一次路径：

为了使效果更明显，将背景色调成暗色

实现遮罩

绘制一个circle元素作为遮罩，为了使流动效果不生硬，还需制作一个渐变效果：

mask元素的内容是一个单一的circle元素，它填充了一个白色到透明的渐变。作为应用mask的目标对象继承mark内容的alpha值（透明度）的结果，效果如下：

添加动画

现在只需让mask元素随着边框路径动起来就行了，animateMotion 元素定义了一个元素如何沿着运动路径进行移动。备注： 为了复用一个已经定义的路径，就有必要使用一个mpath元素嵌入到animateMotion中，而不是使用 path

可以看到效果基本就实现了，但是现在由于遮罩整个区域内都存在描边，流动部分透明度变化是0->1->0，如果想实现类似拖尾效果，则需要同时添加与遮罩动画同步的描边动画，这样一来遮罩区域就只会存在运动的描边了，添加如下代码：

<svg>
  ...
  <use
    stroke="#4fd2dd"
    stroke-linecap="round"
    stroke-width="3"
    xlink:href="#box"
    mask="url(#mask)"
  >
    <animate
      attributeName="stroke-dasharray"
      from="0,1143"
      to="1143,0"
      dur="4s"
      repeatCount="indefinite"
    ></animate>
  </use>
</svg>

描边动画通常使用stroke-dasharray及stroke-dashoffset实现，这里没有使用stroke-dashoffset，而是直接对stroke-dasharray属性添加动画，从最开始只有gap到gap长度为0的过渡过程就形成了描边动画，注意这里的1143是根据SVGPathElement.getTotalLength()获取的，最终效果：

整体代码