在開(kāi)發(fā)制作SVG公眾號(hào)排版“點(diǎn)擊收起下拉展開(kāi)長(zhǎng)圖與切換首圖”時(shí)，會(huì)遇到比較不好處理的問(wèn)題，比如：通過(guò)控制SVG元素的width屬性來(lái)實(shí)現(xiàn)收起或者下拉展開(kāi)時(shí)，首圖會(huì)隨著width的屬性值變化而變化，因?yàn)镾VG元素寬度變大（?。┝死锩娴膬?nèi)容也會(huì)隨之變大（?。?，這不是我們預(yù)期想要的展現(xiàn)效果。

控制width屬性的案例代碼：

因此，只能通過(guò)控制SVG元素的height屬性來(lái)實(shí)現(xiàn)收起下拉展開(kāi)長(zhǎng)圖與切換首圖了，因?yàn)镾VG元素的高度變化不會(huì)影響到SVG元素里面的內(nèi)容（不會(huì)放大也不會(huì)縮?。?。

控制height屬性的案例代碼：

但是還是遇到了一個(gè)問(wèn)題，不同手機(jī)的屏幕寬度是不一樣的，這就導(dǎo)致SVG元素在不同的手機(jī)他的展現(xiàn)高度是不一樣的，我們也無(wú)法實(shí)時(shí)監(jiān)測(cè)SVG的高度，所以展開(kāi)高度的屬性值就無(wú)法準(zhǔn)確控制了，可能會(huì)導(dǎo)致展開(kāi)太多，也可能導(dǎo)致展開(kāi)過(guò)少了。
舉一個(gè)例子：

A手機(jī)屏幕寬度375px，此時(shí)SVG最終展開(kāi)高度是252px；

B手機(jī)屏幕寬度414px，此時(shí)SVG最終展開(kāi)高度是281px；

這時(shí)候animate屬性的屬性值就無(wú)法填寫(xiě)了，你到底是填寫(xiě)252px還是填寫(xiě)281px？這就是一個(gè)大問(wèn)題了。

最終懂點(diǎn)君老師想到了vw單位，在animate元素里面應(yīng)用vw單位，看看能不能解決掉這個(gè)棘手的問(wèn)題。

我們繼續(xù)舉例子來(lái)說(shuō)：

A手機(jī)屏幕寬度375px，此時(shí)SVG最終展開(kāi)高度是67vw（等價(jià)于252px）；

B手機(jī)屏幕寬度414px，此時(shí)SVG最終展開(kāi)高度是67vw（等價(jià)于281px）；

你有沒(méi)有發(fā)現(xiàn)，現(xiàn)在的屬性值都變成了67vw，因?yàn)槭謾C(jī)屏幕越大，SVG元素高度就越高，但是視口也跟著一起變大，因此都變成了一樣的數(shù)值了，我們就可以使用animate元素統(tǒng)一控制高度屬性值了。

大家可以用安卓和蘋(píng)果手機(jī)測(cè)試一下，結(jié)果是不是讓你surprised??！
沒(méi)錯(cuò)，蘋(píng)果手機(jī)不支持animate元素應(yīng)用vw單位，不然真的是太完美了！