使用'SVG'視框的網頁設計指南(HTML)
Viewbox是創建SVG形狀時常用的屬性。 如果您將文檔視為畫布,則該視圖框是您希望查看器看到的畫布的一部分。 即使頁面可能覆蓋整個計算機屏幕,該數字可能只存在於整個計算機的三分之一中。
Viewbox允許您告訴解析器放大第三個。 它消除了額外的空白。 將視圖框想像為裁剪圖像的虛擬方法。
沒有它,你的圖形將顯示其實際大小的三分之一。
Viewbox值
要裁剪圖像,您必須在圖片上創建點以進行裁剪。 使用視圖框屬性時也是如此。 viewbox的值設置包括:
- minx - 開始的x坐標
- miny - 開始的y坐標
- 寬度寬度的視框
- 高度 - 視圖框的高度
視圖框值的語法是:
viewBox =“0 0 200 150”
不要將視圖框的寬度和高度與為SVG文檔設置的寬度和高度混淆。 當你創建一個SVG文件時,你建立的第一個值之一就是文檔的寬度和高度。 該文件是一個畫布。 視圖框可以覆蓋整個畫布或只是其中的一部分。
該視圖框覆蓋整個頁面。
該視圖框覆蓋從右上角開始的一半頁面。
你的形狀也有高度和寬度分配。
它是一個涵蓋800 x 400像素的文檔,其視圖框從右上角開始並擴展了頁面的一半。 該形狀是一個矩形,從視圖框的右上角開始,向左移動100 px,向下移動50 px。
為什麼設置一個視框?
SVG不僅僅是繪製一個形狀。 它可以在另一個頂部創建一個圖形用於陰影效果。 它可以轉換形狀,使其向一個方向傾斜。 對於高級過濾器,您需要了解並使用視圖框屬性。