SVG公众号排版 | 多段自动展开过程会卡住，无法完全展开！

最新推荐文章于 2023-12-28 10:17:00 发布

原创最新推荐文章于 2023-12-28 10:17:00 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

转载请联系微信号：dong_dian_jun

文章标签：

#css3 #前端 #新媒体运营 #产品运营 #svg排版

原创教程 | SVG公众号互动排版专栏收录该内容

14 篇文章

订阅专栏

本文探讨了在SVG多段自动展开过程中出现的卡住和无法完全展开的问题。通过分析，确定问题源于animate动画的values属性值过大。通过调整svg元素的viewBox，减小values属性值，成功解决了卡顿问题，确保长图能完整展开。

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

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

案例部分代码：


<section style="overflow: hidden;font-size: 0;line-height: 0;weixin: dong_dian_jun;pointer-events: none;user-select: none;-webkit-tap-highlight-color: transparent;" powered-by="懂点君 | 懂点君学堂">
    <section style="height: 0;">
        <svg viewBox="0 0 750 1329" style="display: block;margin-top: -1px;background: url(https://mmbiz.qpic.cn/mmbiz_png/URGhbghw5oUvC3pPnmxQ9Yt38pslA6gC3v6VmPJoticRrAZmtWj993Uic60Cz0vYZB84vICGKRDVXaicETZpMc14A/0?wx_fmt=png) 0 0 / 100% auto no-repeat;WeChat: dong_dian_jun;pointer-events: none;-webkit-user-select: none;user-select: none;-webkit-tap-highlight-color: transparent;"></svg>
    </section>
    <svg powered-by="dong-dian-jun" style="display: inline-block;width: 100%;max-width: none !important;vertical-align: top;weixin: dong_dian_jun;pointer-events: none;user-select: none;-webkit-tap-highlight-color: transparent;" viewBox="0 0 750 2">
        <animate attributeName="width" values="100%;5000%" dur="0.5s" begin="0s" fill="freeze" restart="never" calcMode="spline" keySplines="0.4 0 0.6 1"></animate>
        <animate attributeName="width" values="5000%;11050%" dur="0.5s" begin="1s" fill="freeze" restart="never" calcMode="spline" keySplines="0.4 0 0.6 1"></animate>
        <animate attributeName="width" values="11050%;16550%" dur="0.5s" begin="2s" fill="freeze" restart="never" calcMode="spline" keySplines="0.4 0 0.6 1"></animate>
        <!-- 此处省略代码 -->
    </svg>
</section>

点击查看多段自动展开的案例

案例显示效果：

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

分析问题原因：

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

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

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