viewBox

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>
預設值	無
可動畫	是

`<pattern>`

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

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

`<svg>`

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

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

`<symbol>`

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

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

`<view>`

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

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

示例

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

下面的程式碼片段包含三個具有不同 viewbox 屬性值和相同<rect> 和<circle> 子元素的<svg>，從而產生了截然不同的結果。<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 會停用元素的渲染。

規範

規範
可縮放向量圖形 (SVG) 2 # ViewBoxAttribute