文章目錄

• 前言
• 一、案例解析

前言

svg 的viewBox 可以重新定義視口的顯示范圍，通常表現為平移，縮放內容，之前測試的一直是viewBox 和viewPort 之間的等比縮放，后來發現不等比情況與認知有些出入，如下

<svg width="100" height="100" viewBox="0 0 50 100" style="border: 1px solid #ddd"><circle id="mycircle" cx="50" cy="50" r="50" stroke-width="1" stroke="#0f0"/> </svg>

避免誤導，就不說之前對viewBox 的理解了。

一、案例解析

如何確定添加viewBox 之后的內容？以下是通過測試得出的步驟

第一步 確定 viewBox 的選區（藍色）

只考慮中心對齊策略，將viewBox 與viewPort 中心重疊

中心縮放 viewBox 使其恰好能放入viewPort,以較小的長寬縮放比（如：viewPort.height/viewBox.height）為準，本例 中較小縮放比為1，因此，并不需要縮放，viewPort(紅框)所示即為縮放后的結果

換個具有明顯縮放和平移效果的，如下

<svg width="200" height="100" viewBox="50 50 400 100" style="border: 1px solid red"><circle id="mycircle" cx="50" cy="50" r="50" /> </svg>

總結

以上是生活随笔為你收集整理的viewBox视图缩放（1）的全部內容，希望文章能夠幫你解決所遇到的問題。

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