svg 动画2

案例（具体效果参照datav）

实现原理

1.先画个路径 <path>,定义在<defs>中

<path id="path" d="M2.5, 2.5 L677.5, 2.5 L677.5, 237.5 L2.5, 237.5 L2.5, 2.5" fill="transparent"></path>
复制代码

2.随边框运动的是渐变的因此咱们还须要建立一个渐变,定义在<defs>中

<radialGradient id="gradient" cx="50%" cy="50%" r="50%">
  <stop offset="0%" stop-color="#fff" stop-opacity="1"></stop>
  <stop offset="100%" stop-color="#fff" stop-opacity="0"></stop>
</radialGradient>
复制代码

3.而后咱们建立一个随路径运动的 mask,定义在<defs>中

<mask id="border-box-8-mask-1576237778305">
  <circle cx="0" cy="0" r="150" fill="url(#gradient)">
    <animateMotion dur="3s" path="M2.5, 2.5 L677.5, 2.5 L677.5, 237.5 L2.5, 237.5 L2.5, 2.5" rotate="auto"
    repeatCount="indefinite"></animateMotion>
  </circle>
</mask>
复制代码

4.而后开始构建图案

<svg width="680" height="240">
  <defs>
    <path id="path" d="M2.5, 2.5 L677.5, 2.5 L677.5, 237.5 L2.5, 237.5 L2.5, 2.5"
          fill="transparent"></path>
      <radialGradient id="gradient" cx="50%" cy="50%" r="50%">
        <stop offset="0%" stop-color="#fff" stop-opacity="1"></stop>
        <stop offset="100%" stop-color="#fff" stop-opacity="0"></stop>
      </radialGradient>
      <mask id="border-box-8-mask-1576237778305">
      <!-- 因为存在拐弯的状况因此采用圆，让圆心跟随路径移动 -->
        <circle cx="0" cy="0" r="150" fill="url(#gradient)">
        <animateMotion dur="3s" path="M2.5, 2.5 L677.5, 2.5 L677.5, 237.5 L2.5, 237.5 L2.5, 2.5"    rotate="auto"
          repeatCount="indefinite"></animateMotion>
        </circle>
      </mask>
  </defs>
  <!-- 蓝色边框部分 -->
  <use stroke-width="1" xlink:href="#path" stroke="#235fa7"></use>
  <!-- 运动的部分 -->
  <use stroke-width="3" xlink:href="#path" mask="url(#border-box-8-mask-1576237778305)"
       stroke="#4fd2dd">
       <!-- 1830为矩形周长在运动的同时增长 stroke-dasharray 内容部分实现只显示半个圆由于圆心起始位置为0,0跟随着stroke-dasharray内容部分增长的同时移动  而后是mask显示 因此只显示了一条线 -->
      <animate attributeName="stroke-dasharray" from="0, 1830" to="1830, 0" dur="3s" repeatCount="indefinite"></animate>
  </use>
</svg>
复制代码