位置

對於所有元素，SVG 使用與 畫布（以及許多其他計算機繪圖例程）相同的座標系或網格系統。也就是說，文件的左上角被認為是點 (0,0)，即原點。然後從左上角開始以畫素為單位測量位置，正 X 方向為向右，正 Y 方向為向下。

請注意，這與您在孩提時代學習的圖形方式略有不同（Y 軸翻轉）。但是，這與 HTML 中元素定位的方式相同（預設情況下，LTR 文件被認為不是 RTL 文件，RTL 文件從右到左定位 X）。

元素

<rect x="0" y="0" width="100" height="100" />

定義了一個從左上角開始的矩形，該矩形向右延伸 100 畫素，向下延伸 100 畫素。

在最基本的情況下，SVG 文件中的一個畫素對應於輸出裝置（即螢幕）上的一個畫素。但如果 SVG 的名稱中沒有“可縮放”，那麼改變這種行為就有多種可能性了。與 CSS 中的絕對和相對字型大小類似，SVG 定義了絕對單位（帶尺寸識別符號的單位，如“pt”或“cm”）以及所謂的使用者單位，這些單位沒有識別符號，只是純數字。

如果沒有進一步的說明，一個使用者單位等於一個螢幕單位。為了明確改變這種行為，SVG 中有多種可能性。我們從svg根元素開始

<svg width="100" height="100">…</svg>

上面的元素定義了一個簡單的 SVG 畫布，大小為 100x100 畫素。一個使用者單位等於一個螢幕單位。

<svg width="200" height="200" viewBox="0 0 100 100">…</svg>

此處的整個 SVG 畫布大小為 200x200 畫素。但是，viewBox屬性定義了要顯示的畫布部分。這 200x200 畫素顯示了一個從使用者單位 (0,0) 開始的區域，向右和向下延伸 100x100 使用者單位。這實際上是對 100x100 單位區域進行縮放，並將影像放大到兩倍大小。

使用者單位到螢幕單位的當前對映（針對單個元素或整個影像）稱為使用者座標系。除了縮放之外，座標系還可以旋轉、傾斜和翻轉。預設的使用者座標系將一個使用者畫素對映到一個裝置畫素。（但是，裝置可能會決定它理解的一個畫素是什麼。）SVG 檔案中的長度帶有特定尺寸，如“in”或“cm”，將以一種使它們在生成的影像中以 1:1 的比例顯示的方式計算。

SVG 1.1 規範中的一段引文說明了這一點

[...] 假設使用者代理可以從其環境中確定“1px”對應於“0.2822222mm”（即 90dpi）。那麼，對於所有 SVG 內容的處理：[...] “1cm”等於“35.43307px”（因此等於 35.43307 使用者單位）

• « 上一頁
• 下一頁 »