今天继续微信图文互动svg基础知识，内容来源自《硬核运营》实践
keytimes属性
keytimes 是对values值的时间分配比。
例如：下面这个矩形位移动画，总时间3s。去程时间4* 0.8=3.2s，回程时间4* 0.2=0.8s。
<!--keyTimes属性-->
<!--keyTimes属性，默认第一个值是0，最后一个值是1-->
<svg width="100%" height="100">
<rect x="20" y="20" fill="#ec6969" width="100" height="60">
<animate attributeName="x" values="20;150;20" dur="3s" keyTimes="0;.8;1">
</animate>
</rect>
</svg>
keyTimes列表的语义取决于calcMode（插值模式）
| 插值模式（calcMode） | 含义 | keyTimes属性设置 |
|---|---|---|
| linear (默认值) | 每个时间段内均匀变化 | keyTimes列表第一个时间值为0，最后一个时间值为1 |
| spline | 配合keySplines属性，设置缓动函数效果 | keyTimes列表第一个时间值为0，最后一个时间值为1 |
| discrete【离散】 | 没有中间过渡，在对应时刻呈现对应效果 | keyTimes列表第一个时间值为0 |
| paced | 根据values数值均匀变化 | 无视keyTimes属性 |
总结：默认情况下，keyTimes列表第一个时间值为0，最后一个时间值为1 。
opacity 不透明度属性
<!--opacity 不透明度-->
<svg width="100%" height="100">
<circle cx="50" cy="50" r="50" fill="red" opacity="1">
<!--默认图形的opacity=1，即图形是显示的-->
<animate attributeName="opacity" values="1;0;1" dur="3s" begin="1s" repeatcount="indefinite">
</animate>
</circle>
</svg>
opacity ="1" 不透明度最大，也就是可见的。
opacity="0" ，不透明度最小（透明度最大），不可见。
多边形
01 封闭多边形属性 polygon
poly就是很多的意思，gon 就是角度的意思。
<!--封闭多边形polygon-->
<svg width="100%" height="100">
<polygon points="50,50 100,50 100,100 50,100" fill="#888888" stroke="red" stroke-width="1">
<animate attributeName="points" values="50,50 100,50 100,100 50,100;50,50 100,50 120,100 30,100" dur="2s" fill="freeze" >
</animate>
</polygon>
</svg>
points="50,50 100,50 100,100 50,100"是4边形的4个坐标（50,50）（50,100）（100,100）（50,100）
从坐标可以看出来，初始图形是一个正方形。
坐标格式
同一组不同的坐标用空格隔开。两组坐标用分号隔开。例如：初始坐标和动画后坐标就是用分号隔开。
02 折线多边形 polyline
polygon和polyline最大的区别就是，前者是封闭的图形，而后者是点的连线路径，是不封闭的。
如果polyline要形成封闭的图形，需要起点坐标和终点坐标一样。就跟用笔画一个正方形一样,笔尖从起点出发，最后回到起点，这样才是一个封闭的图形。
<!--折线多边形polyline-->
polyline折线,是不封闭的。
<svg width="150" height="150">
<polyline points="50,50 100,50 100,100 50,100" fill="none" stroke="red" stroke-width="1">
</polyline>
</svg>
起点坐标和终点坐标一样，才能形成封闭图形
<svg width="150" height="150">
<polyline points="50,50 100,50 100,100 50,100 50,50" fill="none" stroke="red" stroke-width="1">
</polyline>
</svg>
描边属性 stroke
首先学习几个单词
dash 破折号
array 数组
offset 偏移量
所以，dasharrey 虚线（虚线就是很多破折号）
①实线描边
<svg width="300" height="150">
<rect x="50" y="50" width="100" height="60" fill="#888888" stroke="green" stroke-width="1">
<animate attributeName="stroke-width" values="3;5;1" dur="2s" fill="freeze" >
</animate>
</rect>
</svg>
描述：正方形的描边宽度动画，初始描边宽度stroke-width="1",在2秒内，从3->5->1
② 虚线描边 storke-dasharrey
stroke-dassarray="值1 值2" 我们知道虚线由【实线段】和【空隙】构成。值1就是实线段的长度，值2就是空隙长度。
<svg width="300" height="150">
<rect x="50" y="50" width="100" height="60" fill="#888888" stroke="red" stroke-width="2" stroke-dasharray="15 20">
<animate attributeName="stroke-dasharray" values="15 20;20 35" dur="1s" repeatcount="indefinite">
</animate>
</rect>
</svg>
描述：1s内，虚线描边的实线段长度 15->20,空隙 20->25变化。
stroke-dashoffset 虚线描边的偏移量
如何理解这个偏移量呢？
<!--默认没有偏移量，即storke-dassoffset="0"-->
<svg width="300" height="150">
<rect x="50" y="50" width="100" height="50" fill="#888888" stroke="red" stroke-width="2" stroke-dasharray="100 400" >
</rect>
</svg>
注意：这个矩形周长是300，所以 虚线间隔≥300，就只能看到一条线。可以利用这个实现描边动画，后面讲。
上图来源：https://blog.csdn.net/sillies_3/article/details/90607648
偏移量为正
偏移量为正，从偏移量为0的位置开始，向反方向偏移（逆时针）。
<svg width="300" height="150">
<rect x="50" y="50" width="100" height="50" fill="#888888" stroke="red" stroke-width="2" stroke-dasharray="100 300" stroke-dashoffset="0">
<animate attributeName="stroke-dashoffset" values="0;100" dur="3s" fill="freeze" repeatcount="1" >
</animate>
</rect>
</svg>
偏移量为负
偏移量为负，从偏移量为0的位置开始，正方向偏移（顺时针）
<svg width="300" height="150">
<rect x="50" y="50" width="100" height="50" fill="#888888" stroke="red" stroke-width="2" stroke-dasharray="100 300" stroke-dashoffset="0">
<animate attributeName="stroke-dashoffset" values="0;-100" dur="3s" fill="freeze" repeatcount="1" >
</animate>
</rect>
</svg>
总结：偏移量数值的正负，和偏移方向刚好相反。
描述：这是一个宽100，高50的长方形。虚线长度是300，
虚线描边动画
这个有点深度，学好了可以非常牛皮。关键在于路径的表达，如果你用路径表示一个房子，那么用描边动画就会形成用笔画房子的动画。
实线长度=间隔长度=路径长度=偏移量，这个描边动画的临界条件。
简单点说，就是虚线中的实线段贯穿全程，而看不见空隙。
虚线描边动态效果
<!--虚线动态描边效果-->
<svg width="300" height="150">
<rect x="50" y="50" width="100" height="50" fill-opacity="0" stroke="red" stroke-width="2" stroke-dasharray="300 300" stroke-dashoffset="0">
<animate attributeName="stroke-dashoffset" values="300;0" dur="3s" repeatcount="1">
</animate>
</rect>
</svg>
我们按照矩形路径，描边就会如图所示。
所以，如果用代码写出心形路径，就会绘画出一个心型，再加上表白词。绝对是一个表白利器。不说了，为了摆脱单身，我要去学习了。
未完待续
