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