SVG 座標系統

admin發表於2018-11-30
SVG

繪製任何圖形都必須位於一個座標系中。

很多操作由於過於常態化，反而沒有意識到。

如同蘋果落地，如果沒有刻意強調或者過人的探究精神，誰會意識到萬有引力在起作用。

看如下CSS程式碼效果圖示：

a:3:{s:3:\"pic\";s:43:\"portal/201811/30/155728ywfiwphwiigfshni.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼將紅色div元素水平垂直居中在父div中。

很顯然，div必須處於一個座標系中，否則無法定位。

同理，SVG繪圖也必須位於一個座標系中，下面對其座標系統進行一下介紹。

SVG座標系統分為兩類：

（1）.視口座標系統。

（2）.使用者座標系統。

關於視窗內容可以參閱SVG viewport視窗和畫布一章節。

比如通過<svg>元素即可建立一個視口，看如下程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
svg {
  background-color: #ccc;
}
</style>
</head>
<body>
<svg
  x="10" y="10"
  width="200"
  height="130">
  <rect x="50" y="20"
    width="100"
    height="100"
    fill="blue"/>
</svg>                        
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/30/155808lhuxngeh3ezo6dmn.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.通過<svg>元素建立一個視口，隨之建立一個視口座標系。

（2）.建立視口座標系的同時，也會建立一個使用者座標系，此時兩個座標系重合。

（3）.最後在此使用者座標系中建立一個藍色矩形。

SVG中的座標系，大致圖示如下：

特別說明：此圖是借用網路上一張常用圖片，不知道最初它的出處，所以無法標註引用地址。

a:3:{s:3:\"pic\";s:43:\"portal/201811/30/155825lnrxf8qpzc8nnzm8.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
svg {
  background-color: #ccc;
}
</style>
</head>
<body>
<svg>
  <rect x="20" y="20"
    width="100"
    height="100"
    fill="blue"
    transform="rotate(10)"/>
</svg>                        
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/30/155841nbtldbha5rzhnr5g.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼通過transform將藍色矩形旋轉一定角度。

從表面上看，是將矩形本身旋轉了一定角度，我想很多初學者也是這麼認為。

然而實質是，真正被旋轉的不是矩形本身，而是矩形所在的使用者座標系。

對於元素的縮放、斜切或者旋轉其實都是對座標系的操作，這時，使用者座標系與視口座標系分離了。

上面是對座標系的一些簡單介紹，更多內容參閱如下兩篇文章：

（1）.SVG transform 詳解一章節。

（2）.SVG transform座標變化深入理解一章節。

相關文章