svg 动画初体验

svg 绘制特殊的进度条动画效果

1. 特殊进度条效果绘制
2. mask遮罩的使用
3. animate动画的运用

  <svg x="0" y="0" width="320" height="20" viewbox="0 0 320 20">
        <defs>
          <lineargradient id="rect-line" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stop-color="#0054cd" />
            <stop offset="100%" stop-color="#08fdff" />
          </lineargradient>
        </defs>  
        <!-- <polygon fill="url('#rect-line')" points="0,0 320,0 310,20 0 20" /> -->
        <mask id="progress-list-li-mask">
          <polygon fill="#fff" points="0,0 320,0 310,20 0 20" />
        </mask>
        <mask id="progress-list-li-rect">
          <rect width="0" height="20" fill="#fff">
            <animate attributeName="width" from="0" to="320" dur="1s" fill="freeze" />
          </rect>
        </mask>
        <g mask="progress-list-li-mask">
          <polygon mask="url('#progress-list-li-rect')" fill="url('#rect-line')" points="0,0 320,0 310,20 0 20" />
          <rect style="mix-blend-mode:screen;" width="60" height="20" x="273" fill="#fff">
            <animate
            attributeName="x"
            values="-60; 320; 320"
            keyTimes="0;0.2;1"
            dur="4s"
            fill="freeze"
            repeatCount="indefinite" />
          </rect>
        </g>
      </svg>