<view>

Baseline 广泛可用 *

此特性已成熟稳定，适用于多种设备和浏览器版本。自 2018 年 10 月起，它已在各浏览器中可用。

* 此特性的某些部分可能存在不同级别的支持。

<view> SVG 元素定义了 SVG 文档的一个特定视图。可以通过将 <view> 元素的 id 作为 URL 的目标片段来显示特定视图。

使用语境

分类	None
允许内容	可包含任意数量、任意顺序的下列元素描述性元素

属性

保持长宽比: 此属性定义了当 SVG 片段嵌入到具有不同纵横比的容器中时，必须如何变形。值类型：(none | xMinYMin | xMidYMin | xMaxYMin | xMinYMid | xMidYMid | xMaxYMid | xMinYMax | xMidYMax | xMaxYMax) (meet | slice)?; 默认值：xMidYMid meet; 可动画：是
视图框: 此属性定义了图案片段的 SVG 视口的边界。值类型：<数字列表>；默认值：无；可动画：是
zoomAndPan 已弃用: 此属性指定是否可以放大和移动 SVG 文档。值类型：disable | magnify；默认值：magnify；可动画：否

DOM 接口

此元素实现了 SVGViewElement 接口。

示例

SVG

svg

<svg viewBox="0 0 300 100" width="300" height="100"
      xmlns="http://www.w3.org/2000/svg">

  <view id="one" viewBox="0 0 100 100" />
  <circle cx="50" cy="50" r="40" fill="red" />

  <view id="two" viewBox="100 0 100 100" />
  <circle cx="150" cy="50" r="40" fill="green" />

  <view id="three" viewBox="200 0 100 100" />
  <circle cx="250" cy="50" r="40" fill="blue" />
</svg>

HTML

html

<img src="example.svg" alt="three circles" width="300" height="100" />
<br />
<img src="example.svg#three" alt="blue circle" width="100" height="100" />

结果

规范

规范
Scalable Vector Graphics (SVG) 2 # ViewElement

浏览器兼容性

帮助改进 MDN

了解如何贡献

此页面最后由 MDN 贡献者于 2025 年 7 月 12 日修改。

在 GitHub 上查看此页面 • 报告此内容的问题