transform
transform 屬性定義了一系列應用於元素及其子元素的變換定義。
注意： 作為一個表示屬性，transform 也有一個對應的 CSS 屬性：transform。當同時指定兩者時，CSS 屬性具有優先權。請注意，CSS 屬性和此屬性在語法上存在一些差異！
元素
在 SVG 2 中，您可以將 transform 屬性應用於任何元素，包括 <svg> 根元素。請注意，在 <svg> 根元素上使用 transform 是一項較新的功能，您應檢查 瀏覽器相容性 以獲取支援。在 <svg> 根元素上使用 transform 對於將變換應用於整個 SVG 影像非常方便，無需額外的包裝元素或 CSS 解決方法。
在 SVG 1.1 中，只有以下 16 個元素允許應用 transform：<a>、<circle>、<clipPath>、<defs>、<ellipse>、<foreignObject>、<g>、<image>、<line>、<path>、<polygon>、<polyline>、<rect>、<switch>、<text> 和 <use>。
此外，作為 SVG 1.1 的遺留特性，<linearGradient> 和 <radialGradient> 支援 gradientTransform 屬性，而 <pattern> 支援 patternTransform 屬性，這兩者都與 transform 屬性的行為完全相同。
值
| 值 |
<transform-list>
|
|---|---|
| 預設值 | none |
| 可動畫的 | 是 |
示例
將變換應用於單個 SVG 元素
在此示例中，我們將 transform 應用於 SVG 文件中的單個 <g> 元素。
<svg
viewBox="-40 0 150 100"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g
fill="grey"
transform="rotate(-10 50 100)
translate(-36 45.5)
skewX(40)
scale(1 0.5)">
<path
id="heart"
d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" />
</g>
<use href="#heart" fill="none" stroke="red" />
</svg>
將變換應用於整個 SVG 文件
在此示例中，我們將 transform 應用於 <svg> 根元素，這意味著變換將應用於整個 SVG 文件。
<svg
viewBox="-40 0 150 100"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
transform="rotate(-10 50 100)
translate(-36 15.5)
skewX(40)
scale(1 0.5)">
<g fill="grey">
<path
id="heart"
d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" />
</g>
<use href="#heart" fill="none" stroke="red" />
</svg>
變換函式
transform 屬性的 <transform-list> 可以使用以下變換函式。
警告： 根據規範，您應該也可以使用 CSS 變換函式。但是，相容性不能保證。
Matrix
matrix(<a> <b> <c> <d> <e> <f>) 變換函式以六個值的變換矩陣形式指定一個變換。matrix(a,b,c,d,e,f) 等同於應用變換矩陣
該矩陣透過以下矩陣等式將座標從之前的座標系對映到新的座標系。
示例
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="30" height="20" fill="green" />
<!--
In the following example we are applying the matrix:
[a c e] [3 -1 30]
[b d f] => [1 3 40]
[0 0 1] [0 0 1]
which transform the rectangle as such:
top left corner: oldX=10 oldY=10
newX = a * oldX + c * oldY + e = 3 * 10 - 1 * 10 + 30 = 50
newY = b * oldX + d * oldY + f = 1 * 10 + 3 * 10 + 40 = 80
top right corner: oldX=40 oldY=10
newX = a * oldX + c * oldY + e = 3 * 40 - 1 * 10 + 30 = 140
newY = b * oldX + d * oldY + f = 1 * 40 + 3 * 10 + 40 = 110
bottom left corner: oldX=10 oldY=30
newX = a * oldX + c * oldY + e = 3 * 10 - 1 * 30 + 30 = 30
newY = b * oldX + d * oldY + f = 1 * 10 + 3 * 30 + 40 = 140
bottom right corner: oldX=40 oldY=30
newX = a * oldX + c * oldY + e = 3 * 40 - 1 * 30 + 30 = 120
newY = b * oldX + d * oldY + f = 1 * 40 + 3 * 30 + 40 = 170
-->
<rect
x="10"
y="10"
width="30"
height="20"
fill="red"
transform="matrix(3 1 -1 3 30 40)" />
</svg>
Translate
translate(<x> [<y>]) 變換函式將物件按 x 和 y 移動。如果未提供 y，則假定其值為 0。
換句話說
xNew = xOld + <x> yNew = yOld + <y>
示例
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<!-- No translation -->
<rect x="5" y="5" width="40" height="40" fill="green" />
<!-- Horizontal translation -->
<rect
x="5"
y="5"
width="40"
height="40"
fill="blue"
transform="translate(50)" />
<!-- Vertical translation -->
<rect
x="5"
y="5"
width="40"
height="40"
fill="red"
transform="translate(0 50)" />
<!-- Both horizontal and vertical translation -->
<rect
x="5"
y="5"
width="40"
height="40"
fill="yellow"
transform="translate(50 50)" />
</svg>
Scale
scale(<x> [<y>]) 變換函式指定一個按 x 和 y 進行縮放的操作。如果未提供 y，則假定其等於 x。
示例
<svg viewBox="-50 -50 100 100" xmlns="http://www.w3.org/2000/svg">
<!-- uniform scale -->
<circle cx="0" cy="0" r="10" fill="red" transform="scale(4)" />
<!-- vertical scale -->
<circle cx="0" cy="0" r="10" fill="yellow" transform="scale(1, 4)" />
<!-- horizontal scale -->
<circle cx="0" cy="0" r="10" fill="pink" transform="scale(4, 1)" />
<!-- No scale -->
<circle cx="0" cy="0" r="10" fill="black" />
</svg>
Rotate
rotate(<a> [<x> <y>]) 變換函式指定一個繞給定點旋轉 a 度的操作。如果未提供可選引數 x 和 y，則旋轉是繞當前使用者座標系的 원點進行的。如果提供了可選引數 x 和 y，則旋轉是繞點 (x, y) 進行的。
示例
<svg viewBox="-12 -2 34 14" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="10" height="10" />
<!-- rotation is done around the point 0,0 -->
<rect x="0" y="0" width="10" height="10" fill="red" transform="rotate(100)" />
<!-- rotation is done around the point 10,10 -->
<rect
x="0"
y="0"
width="10"
height="10"
fill="green"
transform="rotate(100, 10, 10)" />
</svg>
SkewX
skewX(<a>) 變換函式指定一個沿 x 軸傾斜 a 度的傾斜變換。
示例
<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
<rect x="-3" y="-3" width="6" height="6" />
<rect x="-3" y="-3" width="6" height="6" fill="red" transform="skewX(30)" />
</svg>
SkewY
skewY(<a>) 變換函式指定一個沿 y 軸傾斜 a 度的傾斜變換。
示例
<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
<rect x="-3" y="-3" width="6" height="6" />
<rect x="-3" y="-3" width="6" height="6" fill="red" transform="skewY(30)" />
</svg>
規範
| 規範 |
|---|
| CSS 變換模組級別 1 # svg-transform |
| Scalable Vector Graphics (SVG) 2 # TransformProperty |
瀏覽器相容性
載入中…
另見
- CSS
transform屬性