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 动画值起始值
< 动画值结束值
5.by 动画的相对变化值
6.begin动画开始时间 可以是⼀组值 例如，beigin=“3s;5s” 表⽰的是3s之后动画⾛⼀下，5s时候动画再⾛⼀下（如果之前动画没⾛完，会⽴即停⽌从头开始）
8.dur 动画持续时间
主要领导是指
repeatCount表⽰动画执⾏次数，可以是合法数值或者”indefinite“
repeatDur定义重复动画的总时间。可以是普通时间值或者”indefinite
polyline设置路径动画
1.将points值转换为path值（将第⼀个坐标点设为M，其他设为L）
2. 利⽤animation设置stroke-dashofft 值为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-dashofft的值⼤于path的长度，来达到‘绘图’的效果梿枷
挨打受罚
//stroke-dashoff 定义dash模式到路径开始的距离，就是实线虚线绘制的起点距路径开始的距离 <animate
attributeName="stroke-dashofft"
from="178"
to="-178"
dur="8s"
repeatCount="indefinite"
/>
</path>火灾逃生技巧
科目四考试技巧速记法
