viewport顯示座標軸 SVG 顯示區域

2021-10-25 16:32:57 字數 1956 閱讀 7001

svg就像一張無限大的畫布,需通過以下的屬性給它指定顯示區域,尺寸和座標系統之後才能顯示出我們需要的內容。

viewport

viewport也叫視口,用來控制畫布區域的大小,主要通過width和height來指定。

可以指定的單位包括:

pxem

expt

pccm

mmin

省略單位則預設使用pt。

寬高各100px

寬高各100em

viewport左上角的點為座標原點(0, 0),x軸向右不斷變大,y軸向下不斷變大。

viewbox

如果svg是乙個大畫布,viewbox就是這塊畫布上你想讓人看到的部分。舉例來說,假設整個螢幕是viewport,viewbox就是截圖的那個擷取框,截完了之後再將框中的內容整個顯示在螢幕(viewport)上。

viewbox由以下幾個屬性構成:

x相對原點的橫向位移

y相對原點的縱向位移

width

viewbox的寬度

height

viewbox的高度

表示從原點開始,擷取左上角1/4大小,然後將這1/4完全鋪滿viewport。

viewbox從viewport上擷取一塊區域。

然後將擷取的內容鋪滿viewport。

當viewbox的寬高比和viewport的寬高比正好相同時,那沒什麼問題。如果寬高比不一致,就得有個屬性來決定如何顯示了。

這個屬性正是preserveaspectratio。

preserveaspectratio="alignment [meet | slice]"

預設值為xmidymid meet

其中,alignment指定軸和位置:

xmin

viewport左側和viewbox的x軸最小值對齊

xmid

viewport水平中心和viewbox的x軸中心值對齊

xmax

viewport右側和viewbox的x軸最大值對齊

ymin

viewport頂側和viewbox的y軸最小值對齊

ymid

viewport垂直中心和viewbox的y軸中心值對齊

ymax

viewport底側和viewbox的y軸最大值對齊

x和y可以任意組合,比如xminymax,xmaxymid等等。

meet

meet表示按x和y軸中較小的尺寸等比縮小圖形,以使圖形完全填充viewport。

slice表示按x和y軸中較大的尺寸等比放大圖形,並裁剪掉超出viewport的部分。

指定preserveaspectratio為none表示根據不保留寬高比,影象會被擠壓縮放,以適應viewport。

另外,值得一提的是,svg中還能巢狀svg,子svg擁有自己的座標系統,就好像大畫布中的小畫布一樣。

matplotlib 設定座標軸

在使用matplotlib模組時畫座標圖時,往往需要對座標軸設定很多引數,這些引數包括橫縱座標軸範圍 座標軸刻度大小 座標軸名稱等 在matplotlib中包含了很多函式,用來對這些引數進行設定。plt.xlim plt.ylim 設定橫縱座標軸範圍 plt.xlabel plt.ylabel 設定...

matlab座標軸設定

1.axis xmin xmax ymin ymax 設定當前圖形的座標範圍,分別為x軸的最小 最大值,y軸的最小最大值 2.v axis 返回包含當前座標範圍的乙個行向量 3.axis auto 將座標軸刻度恢復為自動的預設設定 4.axis manual 凍結座標軸刻度,此時如果hold被設定為...

matlab座標軸設定

1.axis xmin xmax ymin ymax 設定當前圖形的座標範圍,分別為x軸的最小 最大值,y軸的最小最大值 2.v axis 返回包含當前座標範圍的乙個行向量 3.axis auto 將座標軸刻度恢復為自動的預設設定 4.axis manual 凍結座標軸刻度,此時如果hold被設定為...