項(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提供一下事件 *

var instance = panzoom(element); instance.on('panstart', function(e) {console.log('Fired when pan is just started ', e);// Note: e === instance. }); instance.on('panend', function(e) {console.log('Fired when pan ended', e); });

將一半不影響大局的svg標(biāo)簽隱藏后，果然絲滑了很多^v!!!天才想法

總結(jié)

以上是生活随笔為你收集整理的SVG缩放平移优化的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。