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