利用svg纯html+css绘制动态折线效果

<svg class="svg" width="100%" height="80">
        <defs>
            <path id="box1" :d="lineLeftData" fill="transparent"></path>
            <!-- <path id="box1" d="M 0, 57 L 630,57 L 660,80 L 750,80 " fill="transparent"></path> -->
            <path id="box2" :d="lineRightData" fill="transparent"></path>
        </defs>
        <!-- 左 -->
        <use stroke-width="1" xlink:href="#box1"
            stroke="#4fd2dd">
            <animate attributeName="stroke-dasharray" from="0,1910" to="1910,0" dur="3s" repeatCount="indefinite">
            </animate>
        </use>
        <!-- 右 -->
        <use stroke-width="1" xlink:href="#box2"
            stroke="#4fd2dd">
            <animate attributeName="stroke-dasharray" from="0,1910" to="1910,0" dur="3s" repeatCount="indefinite">
            </animate>
        </use>
    </svg>

from to 写的是动态折线的长度，从0，width，到width，0

更新，详细注释的动态边框

<svg width="200" height="200" class="dv-border-svg-container">
          <!-- 定义 -->
          <defs>
            <!--
              <path> 通用标签，画出任何形状
                id：该线的id
                d: 轨迹
                fill 填充颜色
             -->
            <path
              id="pId"
              d="M 10,10 L 10,150  L 150,150 L 150,10 L10,10"
              fill="pink">
            </path>
            <!-- <radialGradient>设置渐变 -->
            <radialGradient id="rId" 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> 遮蔽层
                <circle> 绘制圆
                  cx cy 圆心
                  r 半径 遮蔽层的长度
               -->
               <mask id="mId">
                <circle cx="0" cy="0" r="100" fill="url(#rId)">
                  <!-- 沿着路径移动 -->
                  <animateMotion dur="3s" path="M 10,10 L 10,150  L 150,150 L 150,10 L10,10" rotate="auto"
                    repeatCount="indefinite"></animateMotion>
                </circle>
               </mask>
          </defs>

          <!-- 调用 -->
          <!-- 底层线的轮廓 -->
          <use
            xlink:href="#pId"
            stroke="#235fa7"
            stroke-width="1"
            />
          <!-- 运动的遮蔽层 -->
          <use
            xlink:href="#pId"
            mask="url(#mId)"
            stroke="#4fd2dd"
            stroke-width="3"
            >
          </use>
        </svg>