SVG缩放平移优化
項(xiàng)目場景:
項(xiàng)目場景:項(xiàng)目需要使用SVG進(jìn)行繪制可視化界面;將相關(guān)的平面設(shè)計(jì)CAD文件轉(zhuǎn)換成svg文件,并將svg嵌入html頁面中,可使用dom操作svg.
問題描述
由于轉(zhuǎn)換的svg文件太大了(5~10M),瀏覽器渲染的過程中異常卡頓。平移、縮放很難進(jìn)行。這里記錄svg優(yōu)化的奇思妙想。
解決方案:
首先從網(wǎng)上開始查找相關(guān)的優(yōu)化博客,最終只找到一個(gè)有用的,也是感謝這位大佬,附上連接:
鏈接: SVG平移縮放優(yōu)化
第一步:根據(jù)大佬建議,直接采取鄙人提供的插件panzoom.js;github鏈接:鏈接: panzoom
用了開源插件好多了,起碼可以移動和縮放了,但依然卡頓,不夠絲滑,估計(jì)還是會被客戶吐槽;繼續(xù)研究大佬的博客,使用requestAnimationFrame,發(fā)現(xiàn)panzoom已經(jīng)使用了,后續(xù)的方案已經(jīng)無有效提升了。
- 想起svg卡頓的原因是由于GPU無法及時(shí)渲染造成的,那我如果在縮放、平移的過程中減少svg需要渲染的圖像,會不會絲滑一點(diǎn)!!!*
第二步:利用svg的opacity屬性,在移動事件開始時(shí)設(shè)為0,結(jié)束時(shí)設(shè)為1
- 在github文檔中panzoom提供一下事件 *
將一半不影響大局的svg標(biāo)簽隱藏后,果然絲滑了很多v!!!天才想法
總結(jié)
- 上一篇: 【教程】手机远程连接另一台手机的term
- 下一篇: 初步支持三维Wavefront obje