SVG transform變換深入理解

admin發表於2018-08-10
SVGORM

SVG transform用法詳解一文對transform變換做詳細介紹，也涉及到它變化的實質。

可能由於未著重的強調，會導致一些讀者忽略或者不能很好的理解。

本文不對變換細節做介紹，只結合圖示分析它的實質。

變換不僅可以使用提供的變換函式，也可以使用matrix矩陣函式，SVG矩陣和canvas矩陣原理一樣。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
* {
  margin:0px;
  padding:0px;
}
svg {
  border:1px solid red;
  width:300px;
  height:300px;
  margin:100px;
}
</style>
</head>
<body>
<svg>
  <rect id="ant"
         x="60" y="60"
        width="100"
        height="100"
        transform="matrix(2, 0, 0, 2, 0, 0)"
        fill="blue"/>
</svg>
<div></div>                         
</body>
</html>

採用matrix函式對元素進行縮放；其實translate()、skew、scale()和rotate()內部都是呼叫的矩陣函式。

transform變換的實質:

對SVG圖形元素的變換，表面看是針對元素本身，比如translate位移，好像是將元素從當前座標系的一個位置移動到另一個位置。然而事實且並非如此，每當對元素應用transform變換，都會在此元素之上建立一個原來使用者座標系的副本，然後對此座標系進行位移、縮放等操作，於是在視覺上就產生了操作元素本身的效果。

特別說明：所有演示圖片均來自於外國技術網站，在這裡非常感謝。

變換演示

在初始使用者座標系中，有一個鸚鵡圖形，並沒有採用任何變換。

簡略程式碼如下：

[XML] 純文字檢視 複製程式碼
<svg width="800" height="800">
  <g id="parrot">
    <!-- shapes and paths forming the parrot -->
  </g>
</svg>

下面我們先進行位移操作，程式碼如下:

[XML] 純文字檢視 複製程式碼
<svg width="800" height="800">
  <g id="parrot" transform="translate(150 200)">
    <!-- shapes and paths forming the parrot -->
  </g>
</svg>

變換後的圖示如下：

變換演示

實質是座標系位置的改變，圖示如下：

變換演示

總結如下：

（1）.不要以日常生活中物體位移對svg中相關概念的理解。

（2）.SVG中元素的變換，實質是座標系的變換，從而達到視覺上的位移或者形狀變化的效果。

相關文章