SVGSVGElement: thuộc tính viewBox
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Thuộc tính chỉ đọc viewBox của giao diện SVGSVGElement phản ánh thuộc tính viewBox của phần tử <svg> dưới dạng SVGAnimatedRect.
Thuộc tính này mô tả thuộc tính viewBox của phần tử <svg>, dùng để xác định tọa độ x, tọa độ y, chiều rộng và chiều cao của phần tử <svg>. Các thuộc tính SVGAnimatedRect.baseVal và SVGAnimatedRect.animVal đều là các đối tượng SVGRect, hoặc null nếu viewBox không được xác định. Các thành phần của các đối tượng này có thể khác với các thuộc tính SVGSVGElement.x, SVGSVGElement.y, SVGSVGElement.width và SVGSVGElement.height, vì các thuộc tính x, y, width và height có độ ưu tiên cao hơn thuộc tính viewBox.
Đối với các phần tử SVG không lồng nhau, các giá trị của thuộc tính CSS x, y, width và height có độ ưu tiên cao hơn bất kỳ thuộc tính phần tử nào, vì vậy các giá trị được xác định bởi viewBox có thể không được phản ánh trong giao diện của phần tử.
Giá trị
Một SVGAnimatedRect.
Ví dụ
Cho thẻ mở SVG sau:
<svg viewBox="-12 -18 200 300" x="5" y="5" height="400" width="600"></svg>
Chúng ta có thể lấy các giá trị viewBox, nhưng chúng khác với các thuộc tính x, y, width và height:
const svg = document.querySelector("svg");
const vBox = svg.viewBox;
// Thuộc tính viewBox của SVGSVGElement
console.dir(vBox); // SVGAnimatedRect { baseVal: SVGRect, animVal: SVGRect }
console.log(vBox.baseVal.x); // -12
console.log(vBox.baseVal.y); // -18
console.log(vBox.baseVal.width); // 200
console.log(vBox.baseVal.height); // 300
// Các thuộc tính SVGSVGElement khác
console.log(svg.x); // 5
console.log(svg.y); // 5
console.log(svg.width); // 400
console.log(svg.height); // 600
Thông số kỹ thuật
| Thông số kỹ thuật |
|---|
| Scalable Vector Graphics (SVG) 2 # __svg__SVGFitToViewBox__viewBox |