viewBox

Thuộc tính viewBox định nghĩa vị trí và kích thước, trong không gian người dùng, của một viewport SVG.

Giá trị của thuộc tính viewBox là một danh sách bốn số được phân tách bằng khoảng trắng và/hoặc dấu phẩy: min-x, min-y, width và height. min-x và min-y biểu thị các tọa độ X và Y nhỏ nhất mà viewBox có thể có (các tọa độ gốc của viewBox) và width cùng height chỉ định kích thước của viewBox. viewBox thu được là một hình chữ nhật trong không gian người dùng được ánh xạ tới giới hạn của viewport của một phần tử SVG (không phải browser viewport). Khi một SVG chứa thuộc tính viewBox (thường kết hợp với thuộc tính preserveAspectRatio), một phép biến đổi sẽ kéo giãn hoặc thay đổi kích thước viewport SVG để vừa với một phần tử chứa cụ thể.

Phần tử

Bạn có thể dùng thuộc tính này với các phần tử SVG được mô tả trong các phần bên dưới.

`<marker>`

Với <marker>, viewBox định nghĩa vị trí và kích thước cho nội dung của phần tử <marker>.

Giá trị	<number>,? <number>,? <number>,? <number>
Giá trị mặc định	none
Có thể hoạt ảnh	Có

`<pattern>`

Với <pattern>, viewBox định nghĩa vị trí và kích thước cho nội dung của ô pattern.

Giá trị	<number>,? <number>,? <number>,? <number>
Giá trị mặc định	none
Có thể hoạt ảnh	Có

`<svg>`

Với <svg>, viewBox định nghĩa vị trí và kích thước cho nội dung của phần tử <svg>.

Giá trị	<number>,? <number>,? <number>,? <number>
Giá trị mặc định	none
Có thể hoạt ảnh	Có

`<symbol>`

Với <symbol>, viewBox định nghĩa vị trí và kích thước cho nội dung của phần tử <symbol>.

Giá trị	<number>,? <number>,? <number>,? <number>
Giá trị mặc định	none
Có thể hoạt ảnh	Có

`<view>`

Với <view>, viewBox định nghĩa vị trí và kích thước cho nội dung của phần tử <view>.

Giá trị	<number>,? <number>,? <number>,? <number>
Giá trị mặc định	none
Có thể hoạt ảnh	Có

Ví dụ

html,
body,
svg {
  height: 100%;
  vertical-align: top;
}
svg:not(:root) {
  display: inline-block;
}

Help improve MDN

Learn how to contribute

This page was last modified on Jan 1, 1970 by MDN contributors.

View this page on GitHub • Report a problem with this content