svg 动画

案例

掘金markdown svg 动画彷佛无法显示 我描述一下效果就是下面这个图案从中间向两边扩散参照 datav特效

实现原理

1. 先绘制静态图案

<svg width="300" height="40">
    <polyline fill="transparent" stroke-width="3"
      points="0,8 54,8 60,16 75,16 81,24 216,24 225,16 240,16 245.99999999999997,8 300,8" stroke="#3f96a5">
    </polyline>
    <polyline fill="transparent" stroke-width="2" points="90,32 210,32" stroke="#3f96a5">
    </polyline>
  </svg>
复制代码

2. 添加动画：
   • 使用到的标签：<animate>
   • 使用到的属性：stroke-dasharray
   • 原理：让属性stroke-dasharray从0 whidth/2 0 width/2 变成 0 0 width 0 因为stroke-dasharray用于绘制虚线这个属性变化能够理解为：内容（用于占位）、空白、内容（这次案例实际的内容）、空白，而这个变化的过程就是将两边的空白逐渐被实际的内容替换那么就是上面咱们实现的效果

<svg width="300" height="40">
    <polyline fill="transparent" stroke-width="3"
      points="0,8 54,8 60,16 75,16 81,24 216,24 225,16 240,16 245.99999999999997,8 300,8" stroke="#3f96a5">
      <animate attributeName="stroke-dasharray" attributeType="XML" from="0, 157.52079728939617, 0, 157.52079728939617"
        to="0, 0, 315.04159457879234, 0" dur="1.2s" begin="0s" calcMode="spline" keyTimes="0;1"
        keySplines="0.4,1,0.49,0.98" repeatCount="indefinite"></animate>
    </polyline>
    <polyline fill="transparent" stroke-width="2" points="90,32 210,32" stroke="#3f96a5">
      <animate attributeName="stroke-dasharray" attributeType="XML" from="0, 60, 0, 60" to="0, 0, 120, 0" dur="1.2s"
        begin="0s" calcMode="spline" keyTimes="0;1" keySplines=".4,1,.49,.98" repeatCount="indefinite"></animate>
    </polyline>
  </svg>
复制代码