檢視框

viewBox 屬性定義了 SVG 視口的在使用者座標系中的位置和尺寸。

viewBox 屬性的值是一個由空格和/或逗號分隔的四個數字組成的列表：min-x、min-y、width 和 height。min-x 和 min-y 代表 viewBox 可能擁有的最小 X 和 Y 座標（viewBox 的原點座標），而 width 和 height 指定了 viewBox 的尺寸。最終形成的 viewBox 是使用者座標系中的一個矩形，該矩形被對映到 SVG 元素的視口邊界（而不是瀏覽器視口）。當 SVG 包含 viewBox 屬性時（通常與 preserveAspectRatio 屬性結合使用），會進行變換，拉伸或調整 SVG 視口的大小以適應特定的容器元素。

元素

你可以在下面部分描述的 SVG 元素中使用此屬性。

`<marker>`

對於 <marker>，viewBox 定義了 <marker> 元素內容的位置和尺寸。

值	<number>,? <number>,? <number>,? <number>
預設值	none
可動畫的	是

`<pattern>`

對於 <pattern>，viewBox 定義了圖案平鋪內容的位置和尺寸。

值	<number>,? <number>,? <number>,? <number>
預設值	none
可動畫的	是

`<svg>`

對於 <svg>，viewBox 定義了 <svg> 元素內容的位置和尺寸。

值	<number>,? <number>,? <number>,? <number>
預設值	none
可動畫的	是

`<symbol>`

對於 <symbol>，viewBox 定義了 <symbol> 元素內容的位置和尺寸。

值	<number>,? <number>,? <number>,? <number>
預設值	none
可動畫的	是

`<view>`

對於 <view>，viewBox 定義了 <view> 元素內容的位置和尺寸。

值	<number>,? <number>,? <number>,? <number>
預設值	none
可動畫的	是

示例

html,
body,
svg {
  height: 100%;
  vertical-align: top;
}
svg:not(:root) {
  display: inline-block;
}

下面的程式碼片段包含三個具有不同 viewBox 屬性值的 <svg> 元素，以及相同的 <rect> 和 <circle> 後代元素，從而產生了非常不同的結果。<rect> 的尺寸使用相對單位定義，因此無論 viewBox 值如何，生成的正方形的視覺尺寸看起來都保持不變。<circle> 的半徑屬性 r 在每種情況下都相同，但該使用者單位值是根據 viewBox 中定義的尺寸解析的，從而在每種情況下產生不同的結果。

html

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="100%" height="100%" />
  <circle cx="50%" cy="50%" r="4" fill="white" />
</svg>

<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="100%" height="100%" />
  <circle cx="50%" cy="50%" r="4" fill="white" />
</svg>

<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="100%" height="100%" />
  <circle cx="50%" cy="50%" r="4" fill="white" />
</svg>

r="4" 的使用者單位是根據 viewBox 尺寸解析的，從而建立了截然不同大小的圓形。viewBox 屬性的確切效果受 preserveAspectRatio 屬性的影響。

注意： width 或 height 的值小於或等於 0 將停用元素的渲染。

規範

規範
Scalable Vector Graphics (SVG) 2 # ViewBoxAttribute

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 ⁨2025年3月18日⁩，作者是 MDN 貢獻者。

在 GitHub 上檢視此頁面 • 報告此內容的錯誤