項目場景：

項目場景：項目需要使用SVG進行繪制可視化界面；將相關的平面設計CAD文件轉換成svg文件，并將svg嵌入html頁面中，可使用dom操作svg.

---

問題描述

由于轉換的svg文件太大了(5~10M)，瀏覽器渲染的過程中異常卡頓。平移、縮放很難進行。這里記錄svg優化的奇思妙想。

解決方案：

首先從網上開始查找相關的優化博客，最終只找到一個有用的，也是感謝這位大佬，附上連接：
鏈接: SVG平移縮放優化

第一步：根據大佬建議，直接采取鄙人提供的插件panzoom.js；github鏈接：鏈接: panzoom

用了開源插件好多了，起碼可以移動和縮放了，但依然卡頓，不夠絲滑，估計還是會被客戶吐槽；繼續研究大佬的博客，使用requestAnimationFrame，發現panzoom已經使用了，后續的方案已經無有效提升了。

• 想起svg卡頓的原因是由于GPU無法及時渲染造成的，那我如果在縮放、平移的過程中減少svg需要渲染的圖像，會不會絲滑一點！！！*

第二步：利用svg的opacity屬性，在移動事件開始時設為0，結束時設為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標簽隱藏后，果然絲滑了很多^v!!!天才想法

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。