<view>
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
* Some parts of this feature may have varying levels of support.
使用上下文
类别 | 无 |
---|---|
允许的内容 | 任意数量、任意顺序的下列元素: 描述性元素 |
属性
preserveAspectRatio
-
该属性定义了当 SVG 片段嵌入到具有不同纵横比的容器中时应如何变形。值类型:(
none
|xMinYMin
|xMidYMin
|xMaxYMin
|xMinYMid
|xMidYMid
|xMaxYMid
|xMinYMax
|xMidYMax
|xMaxYMax
) (meet
|slice
)?;默认值:xMidYMid meet
;动画性:是 viewBox
-
该属性定义了模式片段的 SVG 视口边界。值类型:<list-of-numbers>;默认值:无;动画性:是
zoomAndPan
已弃用 非标准-
此属性指定 SVG 文档是否可以被放大和平移。值类型:disable | magnify;默认值:magnify;动画性:否
示例
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="三个圆形" width="300" height="100" />
<br />
<img src="example.svg#three" alt="蓝色圆形" width="100" height="100" />
结果
规范
Specification |
---|
Scalable Vector Graphics (SVG) 2 # ViewElement |
浏览器兼容性
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
view | ||||||||||||
preserveAspectRatio | ||||||||||||
viewBox | ||||||||||||
zoomAndPan |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Non-standard. Check cross-browser support before using.
- Deprecated. Not for use in new websites.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.