polyline设置路径动画

polyline元素

polyline元素是SVG的一个基本形状，用来创建一系列直线连接多个点
其内的points属性绘是制折线的一系列点

<polyline
        points="1.64 94.48 45 94.48 45 2.9 1.64 2.9"
 />

animation 元素

1.attributeName 要变化的元素属性名称

可以是元素直接暴露的属性,也可以是CSS属性

2.attributeType = “CSS | XML | auto” 即将变化的属性是哪一类

attributeType支持三个固定参数，CSS/XML/auto. 用来表明attributeName属性值的列表。x, y以及transform就属于XML, opacity就属于CSS. auto为默认值，自动判别的意思（实际上是先当成CSS处理，如果发现不认识，直接XML类别处理）

3.from 动画值起始值

4.to 动画值结束值

5.by 动画的相对变化值

6.begin动画开始时间 可以是一组值 例如，beigin=“3s;5s” 表示的是3s之后动画走一下，5s时候动画再走一下（如果之前动画没走完，会立即停止从头开始）

7.end 动画结束时间

8.dur 动画持续时间

9.repeatCount, repeatDur

repeatCount表示动画执行次数，可以是合法数值或者”indefinite“
repeatDur定义重复动画的总时间。可以是普通时间值或者”indefinite

polyline设置路径动画

1.将points值转换为path值（将第一个坐标点设为M，其他设为L）
2. 利用animation设置stroke-dashoffset 值为path路径的长度

<!-- <polyline
      class="point"
        points="1.64 94.48 45 94.48 45 2.9 1.64 2.9"
        style="
          fill: none;
          stroke: #00e7b6;
          stroke-linecap: round;
          stroke-linejoin: round;
        "
      /> -->
      //将points转为path路径的d
      // stroke-dasharray属性用来定义描边的虚线长度
      <path
        d="M 1.64 94.48 L 45 94.48 L 45 2.9 L 1.64 2.9"
        style="
          fill: none;
          stroke: #24eb74;
          stroke-linecap: round;
          stroke-linejoin: round;
          stroke-width: 2px;
          stroke-dasharray: 0, 8;
        "
      >
     
     // 通过控制stroke-dashoffset的值大于path的长度，来达到‘绘图’的效果
     //stroke-dashoffse 定义dash模式到路径开始的距离，就是实线虚线绘制的起点距路径开始的距离
        <animate
          attributeName="stroke-dashoffset"
          from="178"
          to="-178"
          dur="8s"
          repeatCount="indefinite"
        />
      </path>

这篇好文章是转载于：学新通技术网