前段时间多段自动展开（eg：红了！）火了，市面上也出现了各种版本（版本一、版本二、版本三等等）的多段自动展开，懂点君以及老铁在制作开发排版的过程中发现了一些问题，今天我们先来说说“自动展开的过程中会卡住，无法完全展开长图”的问题。

大家先打开查看如下案例，然后用你的手机或者电脑查看展开的情况，是否存在卡住的问题？是否存在无法完全展开的问题？

案例部分代码：

案例显示效果：

没有打开看案例的童鞋，我们直接来看显示效果的截图。

分析问题原因：

多段自动展开是通过animate动画控制svg元素的width属性实现展开，当animate动画的values属性值（案例中是百分比的值）比较大时部分手机和电脑会发生卡住的现象。

大家可能还会想到是不是animate动画给svg元素设置的宽度太大导致卡住的问题呢？

一开始本君也是这么想的，经过写案例测试，否定了这个想法。测试的案例中，直接给svg元素设置width的值为66450%，让svg元素的高度达到长图的高度，完全撑开长图，因此我们只要查看长图是否显示完整，在这里点击查看案例。最终我们看到的长图是完整的，所以不是svg元素width的值太大导致的卡住问题。

解决卡住的问题：

问题我们是遇到了，但是怎么解决呢？我们可以通过调整svg元素的viewBox的值，把viewBox的第四个值调大，从而减小animate动画values属性的值，值减小了卡顿就不会发生了。点击查看多段自动展开的案例修改viewBox之前，animate的values属性值最大为66450%；修改viewBox之后，animate的values属性值最大为6645%。animate动画的values属性值明显缩小10倍，避免展开卡顿的问题。

多懂点，少吃亏！今天就分享到这里~