files/zh-tw/web/svg/tutorial/positions/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

---
title: 座標定位
slug: Web/SVG/Tutorial/Positions
tags:
  - SVG
  - 'SVG:教程'
translation_of: Web/SVG/Tutorial/Positions
---
<p>{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}</p>

<h2 id="The_grid" name="The_grid">網格</h2>

<p><img alt="" src="/@api/deki/files/78/=Canvas_default_grid.png"> 對於所有元素，SVG使用的座標系统或者說網格系統，和<a href="/zh-CN/HTML/Canvas" title="zh-CN/HTML/Canvas">Canvas</a>用的差不多（所有電腦繪圖绘图都差不多）。這種座標系统是：以頁面的左上角為(0,0)坐標點，坐標以像素為單位，x軸正方向是向右，y軸正方向是向下。注意，這和你小時候所教的繪圖方式是相反的。但是在HTML文檔中，元素都是用這種方式定位的。</p>

<h4 id="範例：">範例：</h4>

<p>元素</p>

<pre>&lt;rect x="0" y="0" width="100" height="100" /&gt;

</pre>

<p>定義一个矩形，即從左上角開始，向右延展100px，向下延展100px，形成一个100*100大的矩形。</p>

<h3 id="什麼是_像素">什麼是 "像素"?</h3>

<p>基本上，在 SVG 文檔中的1个像素對應輸出設備（比如螢幕）上的1個像素。但是這種情况是可以改變的，否則 SVG 的名字裡也不至於會有“Scalable”（可縮放）這個詞。如同CSS可以定義字體的絕對大小和相對大小，SVG也可以義絕對大小（比如使用“pt”或“cm”標示單位）同時SVG也能使用相對大小，只需给出數字，不標明單位，輸出時就會採用用戶的單位。</p>

<p>在没有进一步规范说明的情况下，1个用户单位等同于1个屏幕单位。要明确改变这种设定，SVG里有多种方法。我们从<code>svg</code>根元素开始：</p>

<pre>&lt;svg width="100" height="100"&gt;

</pre>

<p>上面的元素定義了一個100*100px的SVG畫布，這裡1用戶單位等同於1螢幕單位。</p>

<pre>&lt;svg width="200" height="200" <strong>viewBox="0 0 100 100"</strong>&gt;

</pre>

<p>這裡定義的畫布尺寸是200*200px。但是，viewBox屬性定義了畫布上可以顯示的區域：從(0,0)點開始，100寬*100高的區域。這個100*100的區域，會放到200*200的畫布上顯示。於是就形成了放大兩倍的效果。</p>

<p>用戶單位和螢幕單位的映射關係被稱為<strong>用戶座標系統</strong>。除了縮放之外，座標系統還可以旋轉、傾斜、翻轉。預設的用戶座標系統1用戶像素等於設備上的1像素（但是設備上可能會自己定義1像素到底是多大）。在定義了具體尺寸單位的SVG中，比如單位是“cm”或“in”，最終圖形會以實際大小的1比1比例呈現。</p>

<p>下面是引自SVG1.1規範的一段說明：</p>

<blockquote>
<p>[…] 假設在用戶的設備環境裡，1px等於0.2822222毫米（即分辨率是90dpi），那麼所有的SVG內容都會按照這種比例處理： […] "1cm" 等於 "35.43307px" （即35.43307用戶單位）；</p>
</blockquote>

<p>{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}</p>