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>
複製代碼