视图框

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 上查看此页面 • 报告此内容的错误