在开发制作SVG公众号排版“点击收起下拉展开长图与切换首图”时，会遇到比较不好处理的问题，比如：通过控制SVG元素的width属性来实现收起或者下拉展开时，首图会随着width的属性值变化而变化，因为SVG元素宽度变大（小）了里面的内容也会随之变大（小），这不是我们预期想要的展现效果。

具体来看如下案例：点击查看案例

控制width属性的案例代码：

<svg powered-by="dong-dian-jun" style="display: block;width: 100%;background: url(https://mmbiz.qpic.cn/mmbiz_jpg/ID0w88CyC2ov4vQyRC5reMdcAOSKySGzRT7bH8Em4Jyh4mpNzUSbhbicbORxtvXubicBq01AgXia2lKyUdc2pib2CA/0?wx_fmt=jpeg) 0 0 / 100% auto no-repeat;max-width: none !important;weixin: dong_dian_jun;pointer-events: visible;user-select: none;-webkit-tap-highlight-color: transparent;" viewBox="0 0 1280 480">
    <!-- 控制width属性 -->
    <animate attributeName="width" values="100%;200%;200%" keyTimes="0;0.004;1" dur="1000s" begin="click" fill="freeze" restart="never" calcMode="spline" keySplines="0.3 0 0.7 1;0.3 0 0.7 1"></animate>
</svg>

因此，只能通过控制SVG元素的height属性来实现收起下拉展开长图与切换首图了，因为SVG元素的高度变化不会影响到SVG元素里面的内容（不会放大也不会缩小）。

具体来看如下案例：点击查看案例

控制height属性的案例代码：

<svg style="display: block;width: 100%;background: url(https://mmbiz.qpic.cn/mmbiz_jpg/ID0w88CyC2ov4vQyRC5reMdcAOSKySGzRT7bH8Em4Jyh4mpNzUSbhbicbORxtvXubicBq01AgXia2lKyUdc2pib2CA/0?wx_fmt=jpeg) 0 0 / 100% auto no-repeat;max-width: none !important;weixin: dong_dian_jun;pointer-events: visible;user-select: none;-webkit-tap-highlight-color: transparent;" viewBox="0 0 1280 480">
    <!-- 控制height属性 -->
    <animate attributeName="height" values="150;270;270" keyTimes="0;0.002;1" dur="1000s" begin="click" fill="freeze" restart="never" calcMode="spline" keySplines="0.3 0 0.7 1;0.3 0 0.7 1"></animate>
</svg>

但是还是遇到了一个问题，不同手机的屏幕宽度是不一样的，这就导致SVG元素在不同的手机他的展现高度是不一样的，我们也无法实时监测SVG的高度，所以展开高度的属性值就无法准确控制了，可能会导致展开太多，也可能导致展开过少了。

举一个例子：

A手机屏幕宽度375px，此时SVG最终展开高度是252px；

B手机屏幕宽度414px，此时SVG最终展开高度是281px；

这时候animate属性的属性值就无法填写了，你到底是填写252px还是填写281px？这就是一个大问题了。

最终懂点君老师想到了vw单位，在animate元素里面应用vw单位，看看能不能解决掉这个棘手的问题。

我们继续举例子来说：

A手机屏幕宽度375px，此时SVG最终展开高度是67vw（等价于252px）；

B手机屏幕宽度414px，此时SVG最终展开高度是67vw（等价于281px）；

你有没有发现，现在的属性值都变成了67vw，因为手机屏幕越大，SVG元素高度就越高，但是视口也跟着一起变大，因此都变成了一样的数值了，我们就可以使用animate元素统一控制高度属性值了。具体我们来看一下案例：点击查看案例

<svg style="display: block;width: 100%;background: url(https://mmbiz.qpic.cn/mmbiz_png/ID0w88CyC2rhRAJ4AibCT3dcCGoAj7cGwuE2QPKIHBBuqicruuQFFTAGEoC0eTKicbd9jXmm6SJK2bTDtm7wgZw5w/0?wx_fmt=png) 0 0 / 100% auto no-repeat;max-width: none !important;weixin: dong_dian_jun;pointer-events: visible;user-select: none;-webkit-tap-highlight-color: transparent;" viewBox="0 0 1080 480">
    <!-- vw单位 -->
    <animate attributeName="height" values="40.3vw;67vw;67vw" keyTimes="0;0.002;1" dur="1000s" begin="click" fill="freeze" restart="never" calcMode="spline" keySplines="0.3 0 0.7 1;0.3 0 0.7 1"></animate>
</svg>

大家可以用安卓和苹果手机测试一下，结果是不是让你surprised！！

没错，苹果手机不支持animate元素应用vw单位，不然真的是太完美了！