如何理解SVG中的視圖屬性

使用'SVG'視框的網頁設計指南(HTML)

Viewbox是創建SVG形狀時常用的屬性。 如果您將文檔視為畫布,則該視圖框是您希望查看器看到的畫布的一部分。 即使頁面可能覆蓋整個計算機屏幕,該數字可能只存在於整個計算機的三分之一中。

Viewbox允許您告訴解析器放大第三個。 它消除了額外的空白。 將視圖框想像為裁剪圖像的虛擬方法。

沒有它,你的圖形將顯示其實際大小的三分之一。

Viewbox值

要裁剪圖像,您必須在圖片上創建點以進行裁剪。 使用視圖框屬性時也是如此。 viewbox的值設置包括:

視圖框值的語法是:

viewBox =“0 0 200 150”

不要將視圖框的寬度和高度與為SVG文檔設置的寬度和高度混淆。 當你創建一個SVG文件時,你建立的第一個值之一就是文檔的寬度和高度。 該文件是一個畫布。 視圖框可以覆蓋整個畫布或只是其中的一部分。

該視圖框覆蓋整個頁面。

該視圖框覆蓋從右上角開始的一半頁面。

你的形狀也有高度和寬度分配。


它是一個涵蓋800 x 400像素的文檔,其視圖框從右上角開始並擴展了頁面的一半。 該形狀是一個矩形,從視圖框的右上角開始,向左移動100 px,向下移動50 px。

為什麼設置一個視框?

SVG不僅僅是繪製一個形狀。 它可以在另一個頂部創建一個圖形用於陰影效果。 它可以轉換形狀,使其向一個方向傾斜。 對於高級過濾器,您需要了解並使用視圖框屬性。