<view>
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2018.
* Some parts of this feature may have varying levels of support.
Phần tử SVG <view> xác định một chế độ xem cụ thể của một tài liệu SVG. Một chế độ xem cụ thể có thể được hiển thị bằng cách tham chiếu id của phần tử <view> làm mảnh đích của một URL.
Ngữ cảnh sử dụng
| Categories | None |
|---|---|
| Permitted content | Any number of the following elements, in any order: Descriptive elements |
Thuộc tính
preserveAspectRatio-
Thuộc tính này xác định cách mảnh SVG phải bị biến dạng nếu nó được nhúng trong một vùng chứa có tỉ lệ khung hình khác. Kiểu giá trị: (
none|xMinYMin|xMidYMin|xMaxYMin|xMinYMid|xMidYMid|xMaxYMid|xMinYMax|xMidYMax|xMaxYMax) (meet|slice)?; Giá trị mặc định:xMidYMid meet; Có thể hoạt ảnh: có viewBox-
Thuộc tính này xác định ranh giới của viewport SVG cho mảnh mẫu. Kiểu giá trị: <list-of-numbers>; Giá trị mặc định: none; Có thể hoạt ảnh: có
zoomAndPanDeprecated-
Thuộc tính này chỉ định liệu tài liệu SVG có thể được phóng to và kéo hay không. Kiểu giá trị: disable | magnify; Giá trị mặc định: magnify; Có thể hoạt ảnh: không
Giao diện DOM
Phần tử này triển khai giao diện SVGViewElement.
Ví dụ
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
<img src="example.svg" alt="three circles" width="300" height="100" />
<br />
<img src="example.svg#three" alt="blue circle" width="100" height="100" />
Kết quả
Thông số kỹ thuật
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # ViewElement |