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>