坐標系統
一個普通的笛卡爾坐標系統的坐標原點(0,0)位于左下角位置，X軸方向上向右是正值，向左是負值。Y軸方向上向上是正值，向下是負值。如下圖所示：
而SVG的坐標系統坐標原點位于左上角，X軸和笛卡爾坐標系的X軸相同，但是Y軸則剛好相反，如果SVG中點或圖形數值增加時往下增長，而不是往上。如下圖所示：
SVG坐標系統的單位
你可以指定在SVG坐標系統值1個單位代表什么。如果你沒有明確的指定單位，將會使用像素(px)為單位。下面是SVG元素可以使用的單位：
- em：默認的字體大小，通常一個字符的高度
- ex：字符x的高度
- px：像素
- pt：點數，1/72英寸
- pc：Picas，1/6英寸
- cm：厘米
- mm：毫秒
- in：英寸
SVG元素轉換-TRANSFORM屬性
SVG元素可以被縮放，移動，傾斜和旋轉，就像HTML元素可以使用CSS來轉換一樣。但是因為坐標系統不同，SVG和HTML元素的轉換時有差別的。
TRANSFORM屬性
transform用于在一個元素上指定一個或多個轉換效果。它使用一系列預定義的值作為參數，并按先后順序逐一應用到元素上。
SVG可用的轉換有：旋轉，位移，傾斜和旋轉。SVG的transform屬性和CSS的transform相似，但是它們的參數不同。
矩陣
你可以在一個SVG元素上通過matrix()函數來應用一個或多個轉換。矩陣轉換的語法是：
- matrix(<a> <b> <c> <d> <e> <f>)
位移
要移動一個SVG元素，你可以使用translate()函數。位移的語法是：
- translate(<tx> [<ty>])
translate()函數可以帶一個或兩個參數，分別用于表示水平或垂直的位移。
ty參數是可選的，如果沒有指定，它默認是0。tx和ty參數可以使用空格隔開，也可以使用逗號隔開，還有它們不需要使用單位。它們的單位使用的是用戶坐標系統的單位。
下面的例子將一個SVG元素向右移動100個用戶單位，向下移動300個用戶單位。
- <circle cx="0" cy="0" r="100" transform="translate(100 300)" />
縮放
你可以使用scale()函數來縮放SVG元素。縮放的語法是：
- scale(<sx> [<sy>])
scale()函數可以帶一個或兩個參數，分別表示水平或垂直方向上的縮放。
sy參數是可選值，如果沒有指定，它等于sx的值。sx和sy參數可以使用空格或逗號隔開。并且它們是無單位的數字。
下面的例子將一個SVG元素放大到原來尺寸的2倍。
- <rect width="150" height="100" transform="scale(2)" x="0" y="0" />
下面的例子將SVG元素水平方向放大2倍，垂直方向縮小一半。
- <rect width="150" height="100" transform="scale(2 0.5)" x="0" y="0" />
同樣，我們可以使用逗號來分隔scale()函數的參數，上面的代碼可以寫為：scale(2, .5)。
這里要注意：當一個SVG元素被縮放的時候，整個當前坐標系統也會被同時縮放，導致元素會在viewport中被重新定位。
傾斜
一個SVG元素也可以被傾斜。要傾斜一個SVG元素，你需要使用skewX或skewY函數。語法如下：
- skewX(<skew-angle>)
- skewY(<skew-angle>)
skewX函數指定元素繞X旋轉，skewY函數指定元素繞Y軸旋轉。
旋轉角度使用的是一個無單位的角度值，默認單位是度(degrees)。
注意，元素傾斜也可能會是元素在viewport中重新定位。
旋轉
你可以使用rotate()函數來旋轉一個SVG元素。語法如下：
- rotate(<rotate-angle> [<cx> <cy>])
rotate()函數通過rotate-angle來指定旋轉角度。于CSS轉換中的 rotation 不同，你不能為旋轉角度指定單位，只能使用度(degrees)為單位。角度值使用的是無單位的數字，默認單位為：度。
cx和cy為可選參數，用于代表旋轉的中心點。如果沒有提供cx和cy值，那么旋轉的中心點位于當前用戶坐標系統的原點。
在rotate()函數中指定中心點就像在CSS中設置transform: rotate()和transform-origin的簡寫方式。由于SVG默認的旋轉中心點位于當前用戶坐標系統的左上角(坐標原點)，你創建的旋轉效果可能不是你需要的，這時你就需要指定一個新的旋轉中心點。如果你知道元素的尺寸和位置，你就可以非常容易的為它指定一個旋轉中心點。
下面的例子在當前用戶坐標系統中將一組SVG元素繞(50,50)中心點旋轉45度。
- <g id="parrot" transform="rotate(45 50 50)" x="0" y="0">
- ......
- </g>
本文版權屬于jQuery之家，轉載請注明出處：http://www.htmleaf.com/ziliaoku/ ... g/201506202075.html
【網站聲明】本站除付費源碼經過測試外，其他素材未做測試，不保證完整性，網站上部分源碼僅限學習交流，請勿用于商業用途。如損害你的權益請聯系客服QQ：2655101040 給予處理，謝謝支持。