Hướng dẫn thiết kế web để sử dụng hộp nhìn 'SVG' (HTML)
Viewbox là một thuộc tính thường được sử dụng khi tạo hình SVG . Nếu bạn nghĩ về tài liệu dưới dạng canvas, hộp xem là một phần của canvas bạn muốn người xem xem. Mặc dù trang có thể bao phủ toàn bộ màn hình máy tính, nhưng con số này chỉ có thể tồn tại trong một phần ba toàn bộ.
Hộp xem cho phép bạn thông báo cho trình phân tích cú pháp để phóng to thứ ba đó. Nó giúp loại bỏ khoảng trắng thừa. Hãy suy nghĩ của hộp xem như là một cách tiếp cận ảo để cắt một hình ảnh.
Nếu không có nó, đồ họa của bạn sẽ xuất hiện một phần ba kích thước thực tế của nó.
Giá trị hộp nhìn
Để cắt một hình ảnh, bạn phải tạo các điểm trên hình ảnh để thực hiện các vết cắt. Điều này cũng đúng khi sử dụng thuộc tính hộp xem. Cài đặt giá trị cho hộp xem bao gồm:
- minx —điểm x đầu
- miny — tọa độ y bắt đầu
- chiều rộng — độ rộng của hộp xem
- chiều cao —chiều cao của hộp xem
Cú pháp cho các giá trị của hộp xem là:
viewBox = "0 0 200 150"
Đừng nhầm lẫn giữa chiều rộng và chiều cao của ô xem với chiều rộng và chiều cao bạn đặt cho tài liệu SVG . Khi bạn tạo một tệp SVG, một trong những giá trị đầu tiên bạn thiết lập là chiều rộng và chiều cao của tài liệu. Tài liệu là canvas. Hộp xem có thể bao phủ toàn bộ canvas hoặc chỉ một phần của khung.
Chiều cao
Hộp xem này bao gồm toàn bộ trang.
Chiều cao
Hộp xem này bao gồm một nửa trang bắt đầu ở góc trên bên phải.
Hình dạng của bạn cũng có các bài tập chiều cao và chiều rộng.
Chiều cao
Đây là tài liệu có kích thước 800 x 400 pixel với hộp xem bắt đầu ở góc trên bên phải và mở rộng một nửa trang. Hình dạng là hình chữ nhật bắt đầu ở góc trên bên phải của hộp xem và di chuyển 100 px sang trái và giảm 50 px.
Tại sao đặt Viewbox?
SVG hoạt động nhiều hơn là chỉ vẽ một hình dạng. Nó có thể tạo ra một con số trên đầu trang của một người khác cho một hiệu ứng bóng tối. Nó có thể biến đổi một hình dạng để nó nghiêng theo một hướng. Đối với các bộ lọc nâng cao, bạn sẽ cần hiểu và sử dụng thuộc tính hộp xem.