SVG公众号排版 | animate动画能否支持vw单位？一起来测测~

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

控制width属性的案例代码：

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

控制height属性的案例代码：

但是还是遇到了一个问题，不同手机的屏幕宽度是不一样的，这就导致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元素统一控制高度属性值了。

大家可以用安卓和苹果手机测试一下，结果是不是让你surprised！！
没错，苹果手机不支持animate元素应用vw单位，不然真的是太完美了！