在开发制作SVG公众号互动排版时，我们会经常使用animate元素来实现动画的效果，比如透明度变化（淡入淡出）、宽高大小的变化（慢慢下拉展开）等等，animate元素有些属性可以设置多个数值（比如：values="1;0;0"），数值之间用英文符合隔开，但是在最后一个数值的结尾多写一个英文分号（比如：values="1;0;0;"），这样会导致animate元素在不同的手机操作系统上（Android和iOS）展示效果是不一样的 ，今天我们一起来测试一下吧！

values、keyTimes、keySplines不多写英文分号

点击查看显示的效果

显示的结果：在Android系统和iOS系统上点击颜色正常淡出

<svg viewBox="0 0 800 800" style="display: block;margin-top: -1px;background: #39f 0 0 / 100% auto no-repeat;WeChat: dong_dian_jun;pointer-events: visible;user-select: none;-webkit-tap-highlight-color: transparent;" powered-by="WeChat: dong_dian_jun | dongdianjun.com">
    <animate calcMode="spline" attributeName="opacity" values="1;0;0" dur="1s" keyTimes="0;0.5;1" keySplines=".42,0,.58,1;.42,0,.58,1" fill="freeze" repeatCount="1" restart="never" begin="click"></animate>
</svg>

values属性最后一个数值多写一个英文分号

点击查看显示的效果

修改的代码：values="1;0;0;"

显示的结果：在Android系统和iOS系统上点击颜色正常淡出

keyTimes属性最后一个数值多写一个英文分号

点击查看显示的效果

修改的代码：keyTimes="0;0.5;1;"

显示的结果：在Android系统上失效，代码不执行；在iOS系统上点击颜色正常淡出

keySplines属性最后一个数值多写一个英文分号

点击查看显示的效果

修改的代码：keySplines=".42,0,.58,1;.42,0,.58,1;"

显示的结果：在Android系统上点击颜色正常淡出；在iOS系统上失效，代码不执行；

懂点君的总结

给animate元素属性设置多个数值时，最后一个数值的结尾不要添加分号，一定不要添加分号，否则会导致animate元素出现问题。