files/ru/web/svg/attribute/transform/index.html


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

---
title: transform
slug: Web/SVG/Attribute/transform
tags:
  - SVG
  - SVG атрибуты
translation_of: Web/SVG/Attribute/transform
---
<p>« <a href="/ru/docs/Web/SVG/Attribute" title="Справочник SVG атрибутов">Справочник SVG атрибутов</a></p>

<p>В атрибуте <code>transform</code> перечисляются описания преобразований, применяемых как к самому элементу, так и к его последователям. Описания в списке разделяются пробелами или запятыми и применяются в порядке слева направо.</p>

<h2 id="Контекст_использования">Контекст использования</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="row">Категории</th>
   <td>Нет</td>
  </tr>
  <tr>
   <th scope="row">Значение</th>
   <td><strong title="значение по умолчанию">&lt;transform-list&gt;</strong></td>
  </tr>
  <tr>
   <th scope="row">Анимация</th>
   <td>Да</td>
  </tr>
  <tr>
   <th scope="row">Нормативная база</th>
   <td><a class="external" href="http://www.w3.org/TR/SVG/coords.html#TransformAttribute">SVG 1.1 (2nd Edition)</a></td>
  </tr>
 </tbody>
</table>

<h3 id="Типы_преобразований">Типы преобразований</h3>

<dl>
 <dt>matrix(&lt;a&gt; &lt;b&gt; &lt;c&gt; &lt;d&gt; &lt;e&gt; &lt;f&gt;)</dt>
 <dd>Преобразование с использованием матрицы из шести элементов. Преобразование <code>matrix(a,b,c,d,e,f)</code> равнозначно применению матрицы <math display="block"><semantics><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><annotation encoding="TeX">\begin{pmatrix} a &amp; c &amp; e \\ b &amp; d &amp; f \\ 0 &amp; 0 &amp; 1 \end{pmatrix}</annotation></semantics>,</math> которая отображает координаты из новой системы координат в предыдущую систему координат используя следующие формулы: <math display="block"><semantics><mrow><mrow><mo>(</mo><mtable><mtr><mtd><msub><mi>x</mi><mi>пред.</mi></msub></mtd></mtr><mtr><mtd><msub><mi>y</mi><mi>пред.</mi></msub></mtd></mtr><mtr><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><mo>=</mo><mrow><mo>(</mo><mtable><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><mtr><mtd><msub><mi>x</mi><mstyle><mi>нов.</mi></mstyle></msub></mtd></mtr><mtr><mtd><msub><mi>y</mi><mi>нов.</mi></msub></mtd></mtr><mtr><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><mo>=</mo><mrow><mo>(</mo><mtable><mtr><mtd><mi>a</mi><msub><mi>x</mi><mi>нов.</mi></msub><mo>+</mo><mi>c</mi><msub><mi>y</mi><mi>нов.</mi></msub><mo>+</mo><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi><msub><mi>x</mi><mi>нов.</mi></msub><mo>+</mo><mi>d</mi><msub><mi>y</mi><mi>нов.</mi></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{пред.}} \\ y_{\mathrm{пред.}} \\ 1 \end{pmatrix} = \begin{pmatrix} a &amp; c &amp; e \\ b &amp; d &amp; f \\ 0 &amp; 0 &amp; 1 \end{pmatrix} \begin{pmatrix} x_{\mathrm{нов.}} \\ y_{\mathrm{нов.}} \\ 1 \end{pmatrix} = \begin{pmatrix} a x_{\mathrm{нов.}} + c y_{\mathrm{нов.}} + e \\ b x_{\mathrm{нов.}} + d y_{\mathrm{нов.}} + f \\ 1 \end{pmatrix} </annotation></semantics></math></dd>
 <dt>translate(&lt;x&gt; [&lt;y&gt;])</dt>
 <dd>Перенос по осям <code>x</code> и <code>y</code>. Равнозначно <code>matrix(1 0 0 1 x y)</code>. Если значение <code>y</code> опущено, оно принимается равным нулю.</dd>
 <dt>scale(&lt;x&gt; [&lt;y&gt;])</dt>
 <dd>Масштабирование по осям <code>x</code> и <code>y</code>. Равнозначно <code>matrix(x 0 0 y 0 0)</code>. Если значение <code>y</code> опущено, оно принимается равным <code>x</code>.</dd>
 <dt>rotate(&lt;a&gt; [&lt;x&gt; &lt;y&gt;])</dt>
 <dd>Поворот на <code>a</code> градусов вокруг указанной точки. Если необязательные параметры <code>x</code> и <code>y</code> опущены, поворот будет осуществляться вокруг начала координат текущей пользовательской системы координат. Операция соответствует матрице <math display="block"><semantics><mrow><mo>(</mo><mtable><mtr><mtd><mo>cos</mo><mi>a</mi></mtd><mtd><mo>-</mo><mo>sin</mo><mi>a</mi></mtd><mtd><mn>0</mn></mtd></mtr><mtr><mtd><mo>sin</mo><mi>a</mi></mtd><mtd><mo>cos</mo><mi>a</mi></mtd><mtd><mn>0</mn></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><annotation encoding="TeX">\begin{pmatrix} \cos a &amp; -\sin a &amp; 0 \\ \sin a &amp; \cos a &amp; 0 \\ 0 &amp; 0 &amp; 1 \end{pmatrix}</annotation></semantics></math> Если необязательные параметры <code>x</code> и <code>y</code> присутствуют, поворот будет осуществляться вокруг точки <code>(x, y)</code>. Операция равнозначна следующему списку преобразований: <code>translate(&lt;x&gt;, &lt;y&gt;) rotate(&lt;a&gt;) translate(-&lt;x&gt;, -&lt;y&gt;)</code>.</dd>
 <dt>skewX(&lt;a&gt;)</dt>
 <dd>Наклон относительно оси <code>x</code> на <code>a</code> градусов. Операция соответствует матрице <math display="block"><semantics><mrow><mo>(</mo><mtable><mtr><mtd><mn>1</mn></mtd><mtd><mo>tg</mo><mi>a</mi></mtd><mtd><mn>0</mn></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd><mtd><mn>0</mn></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><annotation encoding="TeX">\begin{pmatrix} 1 &amp; \tan(a) &amp; 0 \\ 0 &amp; 1 &amp; 0 \\ 0 &amp; 0 &amp; 1 \end{pmatrix}</annotation></semantics></math></dd>
 <dt>skewY(&lt;a&gt;)</dt>
 <dd>Наклон относительно оси <code>y</code> на <code>a</code> градусов. Операция соответствует матрице <math display="block"><semantics><mrow><mo>(</mo><mtable><mtr><mtd><mn>1</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd></mtr><mtr><mtd><mo>tg</mo><mi>a</mi></mtd><mtd><mn>1</mn></mtd><mtd><mn>0</mn></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><annotation encoding="TeX"> \begin{pmatrix} 1 &amp; 0 &amp; 0 \\ \tan(a) &amp; 1 &amp; 0 \\ 0 &amp; 0 &amp; 1 \end{pmatrix} </annotation></semantics></math></dd>
</dl>

<h2 id="Примеры">Примеры</h2>

<h3 id="Поворот_и_перенос_SVG-элемента">Поворот и перенос SVG-элемента</h3>

<p>В этом простом примере мы поворачиваем и переносим SVG-элемент, используя атрибут <code>transform</code>. Первоначальный элемент до преобразования показан полупрозрачным.</p>

<p>CSS (необязательный):</p>

<pre class="brush: css">text {
  font: 1em sans-serif;
}</pre>

<p>SVG:</p>

<pre class="brush: html">&lt;svg width="180" height="200"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"&gt;

  &lt;!-- Это элемент до применения переноса и поворота --&gt;
  &lt;rect x="50" y="50" height="100" width="100" style="stroke:#000; fill: #0086B2"<strong> </strong>fill-opacity=0.2 stroke-opacity=0.2&gt;&lt;/rect&gt;

  &lt;!-- Здесь мы добавим текстовый элемент, повернём и перенесём оба элемента --&gt;
  &lt;rect x="50" y="50" height="100" width="100" style="stroke:#000; fill: #0086B2"<strong> transform="translate(30) rotate(45 50 50)"</strong>&gt;&lt;/rect&gt;
  &lt;text x="60" y="105" <strong>transform="translate(30) rotate(45 50 50)"</strong>&gt; Hello Moz! &lt;/text&gt;

&lt;/svg&gt;
</pre>

<p>{{EmbedLiveSample("Поворот_и_перенос_SVG-элемента",200,200,"/files/5217/rotate_and_translate_svg.png.png")}}</p>

<h3 id="General_Transformation">Общее преобразование</h3>

<p>Вот простой пример, чтобы понять общее преобразование. Мы рассмотрим матрицу преобразования <code>matrix(1,2,3,4,5,6)</code> и нарисуем жирную синюю линию из точки (10,20) в точку (30,40) в новой системе координат. Тонкая белая линия, проходящая через те же точки, нарисована над нею, используя первоначальную систему координат.</p>

<pre class="brush: html">&lt;svg width="160" height="230" xmlns="http://www.w3.org/2000/svg"&gt;

  &lt;g transform="matrix(1,2,3,4,5,6)"&gt;
    &lt;!-- Новая система координат (жирная синяя линия)
         x1 = 10 | x2 = 30
         y1 = 20 | y2 = 40
      --&gt;
    &lt;line x1="10" y1="20" x2="30" y2="40" style="stroke-width: 10px; stroke: blue;"/&gt;
  &lt;/g&gt;

  &lt;!-- Предыдущая система координат (тонкая белая линия)
       x1 = 1 * 10 + 3 * 20 + 5 = 75  | x2 = 1 * 30 + 3 * 40 + 5 = 155
       y1 = 2 * 10 + 4 * 20 + 6 = 106 | y2 = 2 * 30 + 4 * 40 + 6 = 226
    --&gt;
  &lt;line x1="75" y1="106" x2="155" y2="226" style="stroke-width: 1px; stroke: white;"/&gt;

&lt;/svg&gt;
</pre>

<p>{{ EmbedLiveSample('General_Transformation','200px','250px') }}</p>

<h2 id="Элементы">Элементы</h2>

<p>Следующие элементы могут использовать атрибут <code>transform</code>:</p>

<ul>
 <li>{{ SVGElement("a") }}</li>
 <li>{{ SVGElement("clipPath") }}</li>
 <li>{{ SVGElement("defs") }}</li>
 <li>{{ SVGElement("foreignObject") }}</li>
 <li>{{ SVGElement("g") }}</li>
 <li>{{ SVGElement("switch") }}</li>
 <li>{{ SVGElement("use") }}</li>
 <li><a href="/en/SVG/Element#Graphics" title="en/SVG/Element#Graphics">Графические элементы</a> »</li>
</ul>