diff options
Diffstat (limited to 'files/ru/web/svg/attribute/transform/index.html')
| -rw-r--r-- | files/ru/web/svg/attribute/transform/index.html | 121 |
1 files changed, 121 insertions, 0 deletions
diff --git a/files/ru/web/svg/attribute/transform/index.html b/files/ru/web/svg/attribute/transform/index.html new file mode 100644 index 0000000000..c202361239 --- /dev/null +++ b/files/ru/web/svg/attribute/transform/index.html @@ -0,0 +1,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="значение по умолчанию"><transform-list></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" title="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(<a> <b> <c> <d> <e> <f>)</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 & c & e \\ b & d & f \\ 0 & 0 & 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 & c & e \\ b & d & f \\ 0 & 0 & 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(<x> [<y>])</dt> + <dd>Перенос по осям <code>x</code> и <code>y</code>. Равнозначно <code>matrix(1 0 0 1 x y)</code>. Если значение <code>y</code> опущено, оно принимается равным нулю.</dd> + <dt>scale(<x> [<y>])</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(<a> [<x> <y>])</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 & -\sin a & 0 \\ \sin a & \cos a & 0 \\ 0 & 0 & 1 \end{pmatrix}</annotation></semantics></math> Если необязательные параметры <code>x</code> и <code>y</code> присутствуют, поворот будет осуществляться вокруг точки <code>(x, y)</code>. Операция равнозначна следующему списку преобразований: <code>translate(<x>, <y>) rotate(<a>) translate(-<x>, -<y>)</code>.</dd> + <dt>skewX(<a>)</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 & \tan(a) & 0 \\ 0 & 1 & 0 \\ 0 & 0 & 1 \end{pmatrix}</annotation></semantics></math></dd> + <dt>skewY(<a>)</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 & 0 & 0 \\ \tan(a) & 1 & 0 \\ 0 & 0 & 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"><svg width="180" height="200" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <!-- Это элемент до применения переноса и поворота --> + <rect x="50" y="50" height="100" width="100" style="stroke:#000; fill: #0086B2"<strong> </strong>fill-opacity=0.2 stroke-opacity=0.2></rect> + + <!-- Здесь мы добавим текстовый элемент, повернем и перенесем оба элемента --> + <rect x="50" y="50" height="100" width="100" style="stroke:#000; fill: #0086B2"<strong> transform="translate(30) rotate(45 50 50)"</strong>></rect> + <text x="60" y="105" <strong>transform="translate(30) rotate(45 50 50)"</strong>> Hello Moz! </text> + +</svg> +</pre> + +<p>{{EmbedLiveSample("Rotating_and_Translating_an_SVG_element",200,200,"/files/5217/rotate_and_translate_svg.png.png")}}</p> + +<h3 id="General_Transformation" name="General_Transformation">Общее преобразование</h3> + +<p>Вот простой пример, чтобы понять общее преобразование. Мы рассмотрим матрицу преобразования <code>matrix(1,2,3,4,5,6)</code> и нарисуем жирную синюю линию из точки (10,20) в точку (30,40) в новой системе координат. Тонкая белая линия, проходящая через те же точки, нарисована над нею, используя первоначальную систему координат.</p> + +<pre class="brush: html"><svg width="160" height="230" xmlns="http://www.w3.org/2000/svg"> + + <g transform="matrix(1,2,3,4,5,6)"> + <!-- Новая система координат (жирная синяя линия) + x1 = 10 | x2 = 30 + y1 = 20 | y2 = 40 + --> + <line x1="10" y1="20" x2="30" y2="40" style="stroke-width: 10px; stroke: blue;"/> + </g> + + <!-- Предыдущая система координат (тонкая белая линия) + 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 + --> + <line x1="75" y1="106" x2="155" y2="226" style="stroke-width: 1px; stroke: white;"/> + +</svg> +</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> |