1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
|
---
title: transform
slug: Web/SVG/Attribute/transform
translation_of: Web/SVG/Attribute/transform
---
<div>{{SVGRef}}</div>
<pre dir="ltr" id="tw-target-text"><strong>transform</strong> 属性定义了一系列应用于元素和元素子元素的变换规则集合</pre>
<div id="topExample">
<div class="hidden">
<pre class="brush: css">html,body,svg { height:100% }</pre>
</div>
<pre class="brush: html"><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 xlink:href="#heart" fill="none" stroke="red"/>
</svg>
</pre>
<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p>
</div>
<p class="note"><strong>提示:</strong> 从SVG2开始，transform是一种图像属性，这意味着它可以用作CSS属性。但是请注意，CSS属性和属性之间在语法上存在一些差异。有关在这种情况下使用的特定语法，请参见CSS属性{{cssxref('transform')}}的文档</p>
<p>作为表示属性，任何元素都可以使用<strong><code>transform</code></strong> （在SVG 1.1中，仅这16个元素被允许使用：{{SVGElement('a')}}, {{SVGElement('circle')}}, {{SVGElement('clipPath')}}, {{SVGElement('defs')}}, {{SVGElement('ellipse')}}, {{SVGElement('foreignObject')}}, {{SVGElement('g')}}, {{SVGElement('image')}}, {{SVGElement('line')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('switch')}}, {{SVGElement('text')}}, and {{SVGElement('use')}})。<br>
<br>
另外，作为SVG 1.1的遗留物，{{SVGElement('linearGradient')}}和{{SVGElement('radialGradient')}}支持 <code>gradientTransform </code>属性，而{{SVGElement('pattern')}}支持 <code>patternTransform </code>属性，两者的行为完全相同于 <code>transform</code> 属性</p>
<table class="standard-table">
<tbody>
<tr>
<th scope="row">Value</th>
<td><strong><a href="/docs/Web/SVG/Content_type#Transform-list"><transform-list></a></strong></td>
</tr>
<tr>
<th scope="row">Default value</th>
<td><em>none</em></td>
</tr>
<tr>
<th scope="row">Animatable</th>
<td>Yes</td>
</tr>
</tbody>
</table>
<h2 id="Transform_functions">Transform functions</h2>
<p><code>transform</code> 属性 <em><code><transform-list> </code></em>可以使用以下的所有 <code>transform </code>函数</p>
<p class="warning"><strong>警告:</strong> 根据规范，您还应该能够使用CSS {{cssxref('transform-function', 'transform functions')}}，但是，这不能保证兼容性。</p>
<h3 id="Matrix">Matrix</h3>
<p><code>matrix(<a> <b> <c> <d> <e> <f>)</code> 函数以六个值的变换矩阵形式指定一个 <code>transform</code>。 matrix（a，b，c，d，e，f）等同于应用变换矩阵： \ begin {pmatrix} a＆c＆e \\ b＆d＆f \\ 0＆0＆1 \ end {pmatrix} 通过以下矩阵等式将坐标从先前的坐标系映射到新的坐标系：<br>
<math display="block"><semantics><mrow><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>n</mi><mi>e</mi><mi>w</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub></mtd></mtr><mtr><mtd><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>n</mi><mi>e</mi><mi>w</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub></mtd></mtr><mtr><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><mo>=</mo><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>p</mi><mi>r</mi><mi>e</mi><mi>v</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub></mtd></mtr><mtr><mtd><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>p</mi><mi>r</mi><mi>e</mi><mi>v</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub></mtd></mtr><mtr><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><mo>=</mo><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><mi>a</mi><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>p</mi><mi>r</mi><mi>e</mi><mi>v</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>c</mi><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>p</mi><mi>r</mi><mi>e</mi><mi>v</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>p</mi><mi>r</mi><mi>e</mi><mi>v</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>d</mi><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>p</mi><mi>r</mi><mi>e</mi><mi>v</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>f</mi></mtd></mtr><mtr><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow></mrow><annotation encoding="TeX"> \begin{pmatrix} x_{\mathrm{newCoordSys}} \\ y_{\mathrm{newCoordSys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{pmatrix} \begin{pmatrix} x_{\mathrm{prevCoordSys}} \\ y_{\mathrm{prevCoordSys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a x_{\mathrm{prevCoordSys}} + c y_{\mathrm{prevCoordSys}} + e \\ b x_{\mathrm{prevCoordSys}} + d y_{\mathrm{prevCoordSys}} + f \\ 1 \end{pmatrix} </annotation></semantics></math></p>
<h4 id="举例">举例</h4>
<div class="hidden">
<pre class="brush: css">html,body,svg { height:100% }
</pre>
</div>
<pre class="brush: html"><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></pre>
<p>{{EmbedLiveSample('Matrix', '100%', 200)}}</p>
<h3 id="Translate">Translate</h3>
<p> <code>translate(<x> [<y>])</code> 变换函数通过 <code>x</code> 向量和 <code>y</code> 向量移动元素 (i.e. <code>x<sub>new</sub> = x<sub>old</sub> + <x>, y<sub>new</sub> = y<sub>old</sub> + <y></code>). 如果 <code>y</code> 向量没有被提供，那么默认为 <code>0</code> </p>
<h4 id="举例_2">举例</h4>
<div class="hidden">
<pre class="brush: css">html,body,svg { height:100% }
</pre>
</div>
<pre class="brush: html"><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></pre>
<p>{{EmbedLiveSample('Translate', '100%', 200)}}</p>
<h3 id="Scale">Scale</h3>
<p><code>scale(<x> [<y>])</code> 变换函数通过 <code>x</code> 和 <code>y</code>指定一个 <strong>等比例放大缩小</strong> 操作。如果 <code>y</code> 没有被提供，那么假定为等同于 <code>x</code></p>
<h4 id="举例_3">举例</h4>
<div class="hidden">
<pre class="brush: css">html,body,svg { height:100% }
</pre>
</div>
<pre class="brush: html"><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></pre>
<p>{{EmbedLiveSample('Scale', '100%', 200)}}</p>
<h3 id="Rotate">Rotate</h3>
<p><code>rotate(<a> [<x> <y>])</code> 变换方法通过一个给定角度对一个指定的点进行旋转变换。如果x和y没有提供，那么默认为当前元素坐标系原点。否则，就以<code>(x,y)</code>为原点进行旋转。</p>
<h4 id="举例_4">举例</h4>
<div class="hidden">
<pre class="brush: css">html,body,svg { height:100% }
</pre>
</div>
<pre class="brush: html"><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></pre>
<p>{{EmbedLiveSample('Rotate', '100%', 200)}}</p>
<h3 id="SkewX">SkewX</h3>
<p><code>skewX(<a>)</code> 变换函数指定了沿 <code>x</code> 轴倾斜 <code>a°</code> 的倾斜变换。</p>
<h4 id="举例_5">举例</h4>
<div class="hidden">
<pre class="brush: css">html,body,svg { height:100% }
</pre>
</div>
<pre class="brush: html"><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></pre>
<p>{{EmbedLiveSample('SkewX', '100%', 200)}}</p>
<h3 id="SkewY">SkewY</h3>
<p><code>skewY(<a>)</code> 变换函数指定了沿 <code>y</code> 轴倾斜 <code>a°</code> 的倾斜变换。</p>
<h4 id="举例_6">举例</h4>
<div class="hidden">
<pre class="brush: css">html,body,svg { height:100% }
</pre>
</div>
<pre class="brush: html"><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></pre>
<p>{{EmbedLiveSample('SkewY', '100%', 200)}}</p>
<h2 id="Specification">Specification</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS Transforms 2', '#svg-transform', 'transform')}}</td>
<td>{{Spec2('CSS Transforms 2')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('CSS3 Transforms', '#svg-transform', 'transform')}}</td>
<td>{{Spec2('CSS3 Transforms')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName("SVG2", "coords.html#TransformProperty", "transform")}}</td>
<td>{{Spec2("SVG2")}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName("SVG1.1", "coords.html#TransformAttribute", "transform")}}</td>
<td>{{Spec2("SVG1.1")}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
|
