files/ru/web/svg/tutorial/basic_transformations/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

---
title: Базовые трансформации
slug: Web/SVG/Tutorial/Basic_Transformations
translation_of: Web/SVG/Tutorial/Basic_Transformations
original_slug: Web/SVG/Tutorial/Базовые_Преобразования
---
<div>{{PreviousNext("Web/SVG/Tutorial/Texts", "Web/SVG/Tutorial/Clipping_and_masking")}}</div>

<p>Теперь мы готовы начать изменять наши замечательные изображения. Но сначала давайте ознакомимся с {{SVGElement("g")}} элементом. С его помощью вы можете  назначить свойства для любого набора элементов. На самом деле, в этом и состоит его единственная цель. Например:</p>

<div id="two_blocks">
<pre class="brush: html notranslate">&lt;svg width="30" height="10"&gt;
    &lt;g fill="red"&gt;
        &lt;rect x="0" y="0" width="10" height="10" /&gt;
        &lt;rect x="20" y="0" width="10" height="10" /&gt;
    &lt;/g&gt;
&lt;/svg&gt;
</pre>
</div>

<p>{{ EmbedLiveSample('two_blocks', '30', '10', '', 'Web/SVG/Tutorial/Basic_Transformations') }}</p>

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

<h2 id="Перемещения">Перемещения</h2>

<p>Иногда необходимо сместить элемент, хотя вы спозиционировали его согласно определённым атрибутам. Для этого используется <code>translate()</code>.</p>

<pre class="brush: html notranslate">&lt;svg width="40" height="50" style="background-color:#bff;"&gt;
    &lt;rect x="0" y="0" width="10" height="10" transform="translate(30,40)" /&gt;
&lt;/svg&gt;
</pre>

<p>Пример генерирует прямоугольник, перемещённый в точку  (30,40) вместо точки (0,0).</p>

<p>{{ EmbedLiveSample('Перемещения', '40', '50', '', 'Web/SVG/Tutorial/Basic_Transformations') }}</p>

<p>если второе значение не задано, то оно приравнивается <var>0</var>.</p>

<h2 id="Вращение">Вращение</h2>

<p>Вращение элементов - это достаточно типичная задача. Используйте  <code>rotate()</code> для этого:</p>

<pre class="brush: html notranslate">&lt;svg width="31" height="31"&gt;
    &lt;rect x="12" y="-10" width="20" height="20" transform="rotate(45)" /&gt;
&lt;/svg&gt;
</pre>

<p>Данный пример показывает квадрат который повернули на 45 градусов. Значение для <code>rotate()</code> задаётся в градусах.</p>

<p>{{ EmbedLiveSample('Вращение', '31', '31', '', 'Web/SVG/Tutorial/Basic_Transformations') }}</p>

<h2 id="Смещение_углов">Смещение углов</h2>

<p>Чтобы сделать ромб из нашего прямоугольника, доступны преобразования skewX () и skewY (). Каждый из них принимает угол, определяющий, насколько элемент будет искажён.</p>

<h2 id="Масштабирование">Масштабирование</h2>

<p><code>scale()</code> изменяем размер элемента. Он использует 2 параметра. Первый - это коэффициент масштабирования по оси Х, а второй - по оси Y.  Коэффициенты выражают сжатие по отношению к оригинальному изображению. Например, <var>0.5 уменьшает на 50%. Если второй параметр отсутствует, то тогда он принимается равным первому.</var></p>

<h2 id="Комплексные_перемещения_с_matrix"><strong id="docs-internal-guid-68ee5272-9619-cb26-01de-19a4df728cd5">Комплексные перемещения с <code>matrix()</code></strong></h2>

<p>Все приведённые выше преобразования могут быть описаны с помощью матрицы перемещений 2x3. Чтобы объединить несколько перемещений, можно установить результирующую матрицу с помощью <code>matrix(a, b, c, d, e, f)</code>, которая преобразует координаты из предыдущей системы координат в новую систему координат посредством:</p>

<p><math display="block"><semantics><mrow><mo>{</mo><mtable rowspacing="0.5ex"><mtr><mtd><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>new</mi><mi></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>a</mi><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>prev</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>prev</mi><mi></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><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>new</mi><mi></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>b</mi><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>prev</mi><mi></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>prev</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></mtable></mrow><annotation encoding="TeX">\left\{ \begin{matrix} x_{\mathrm{prevCoordSys}} = a x_{\mathrm{newCoordSys}} + c y_{\mathrm{newCoordSys}} + e \\ y_{\mathrm{prevCoordSys}} = b x_{\mathrm{newCoordSys}} + d y_{\mathrm{newCoordSys}} + f \end{matrix} \right. </annotation></semantics></math></p>

<p>См. <a href="/en-US/docs/Web/SVG/Attribute/transform#General_Transformation">конкретный пример документации SVG</a>. Подробную информацию об этом свойстве можно найти в <a href="http://www.w3.org/TR/SVG/coords.html#TransformMatrixDefined">SVG Рекомендациях</a>.</p>

<h2 id="Эффекты_на_системе_координат">Эффекты на системе координат</h2>

<p>В случае использования преобразований вы устанавливаете новую систему координат внутри элемента, к которому применяются изменения. Это означает, что единицы измерения которые вы определяете и его дочерние еи не будут соответствовать 1:1, но также будут искажены, повёрнуты, перемещены и смаштабированы в соответствии с преобразованиями.</p>

<pre class="brush: html notranslate">&lt;svg width="100" height="100"&gt;
    &lt;g transform="scale(2)"&gt;
        &lt;rect width="50" height="50" /&gt;
    &lt;/g&gt;
&lt;/svg&gt;
</pre>

<p>В результата прямоугольник в примере выше будет 100x100px. Более интригующие эффекты возникают, когда вы используете такие атрибуты, как <code>userSpaceOnUse</code>.</p>

<p>{{ EmbedLiveSample('Эффекты_на_системе_координат', '100', '100', '', 'Web/SVG/Tutorial/Basic_Transformations') }}</p>

<h2 id="Встраивание_SVG_в_SVG">Встраивание SVG в SVG</h2>

<p>В отличие от HTML, SVG позволяет встраивать другие <code>svg</code> элементы без разрыва. Таким образом вы можете запросто создать новую координатную систему используя <code>viewBox</code>, <code>width</code> и<code>height</code> внутреннего <code>svg</code> элемента.</p>

<pre class="brush: html notranslate">&lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100"&gt;
  &lt;svg width="100" height="100" viewBox="0 0 50 50"&gt;
    &lt;rect width="50" height="50" /&gt;
  &lt;/svg&gt;
&lt;/svg&gt;
</pre>

<p>На примере выше, так же как и на других примерах ранее, вы можете видеть такой же эффект увеличения изображения в два раза.</p>

<p>{{ EmbedLiveSample('Встраивание_SVG_в_SVG', '100', '100', '', 'Web/SVG/Tutorial/Basic_Transformations') }}</p>

<div>{{PreviousNext("Web/SVG/Tutorial/Texts", "Web/SVG/Tutorial/Clipping_and_masking")}}</div>