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
|
---
title: Расположение (позиции)
slug: Web/SVG/Tutorial/Positions
tags:
- SVG
- SVG:Руководство
translation_of: Web/SVG/Tutorial/Positions
original_slug: Web/SVG/Tutorial/Позиции
---
<p>{{ PreviousNext("Web/SVG/Tutorial/Getting_Started", "Web/SVG/Tutorial/Basic_Shapes") }}</p>
<h2 id="The_grid" name="The_grid">Сетка</h2>
<p><img alt="" class="internal" src="/@api/deki/files/78/=Canvas_default_grid.png" style="float: right;">SVG для всех элементов использует систему координат или сеточную систему, схожую с той, что используется <a href="/en/HTML/Canvas" title="en/HTML/Canvas">canvas</a> (и множеством других стандартных компьютерных программ для рисования). Здесь верхний левый угол документа принимается за точку (0,0). Затем позиции измеряются в пикселях от верхнего левого угла с положительным направлением x, уходящим вправо, и положительным направлением y, уходящим вниз. Заметьте, что это направление противоположно тому, к которому мы привыкли с детства. Однако, именно этим способом располагаются элементы HTML.</p>
<h4 id="Пример">Пример:</h4>
<p>Элемент</p>
<pre><rect x="0" y="0" width="100" height="100" />
</pre>
<p>определяет прямоугольник от верхнего левого угла, который простирается оттуда на 100px вправо и вниз.</p>
<h3 id="Что_такое_пиксели">Что такое "пиксели"?</h3>
<p>В наиболее общем случае один пиксель в документе SVG отображает один пиксель в устройстве вывода (a.k.a. экран). Но SVG формат не назывался бы "Маcштабируемым" (от англ. scalable), если не было бы некоторых возможностей изменить такое поведение. Большинство как абсолютных, так и относительных размеров шрифтов в CSS, SVG определяет абсолютными единицами (с размерными обозначениями "pt" или "cm") и, так называемыми, пользовательскими единицами без идентификаторов, являющиеся простыми цифрами.</p>
<p>Без дополнительного уточнения, одна пользовательская единица равна одной единице экрана. Чтобы явно изменить такое поведение, в SVG существуют некоторые возможности. Мы начинаем с корневого элемента <code>svg</code>:</p>
<pre><svg width="100" height="100">
</pre>
<p>Вышеупомянутый элемент определяет простое полотно SVG размером 100x100px. Одна пользовательская единица равна одной единице экрана.</p>
<pre><svg width="200" height="200" <strong>viewBox="0 0 100 100"</strong>>
</pre>
<p>Всё полотно SVG здесь имеет размер 200px на 200px. Однако, атрибут <code>viewBox определяет часть этого полотна, которая будет отображаться</code>. Эти 200x200 пикселей показывают область, которая начинается на пользовательской единице (0,0) и простирается на 100x100 пользовательских единиц вправо и вниз. Эффективное изменение масштаба в области 100x100 единиц увеличивает изображение до двойного размера.</p>
<p>Текущее отображение (для единичного элемента или всего изображения) пользовательских единиц в экранные единицы называется <strong>системой пользовательских координат</strong>. Помимо масштабирования, систему координат можно также вращать, смещать и переворачивать. Система пользовательских координат по умолчанию отображает один пользовательский пиксель на один пиксель устройства. (При этом, устройство может решать, что понимать под одним пикселем.) Длины в файле SVG с особенными расширениями, такими как "in" или "cm" затем вычисляются таким образом, чтобы выразить их как 1:1 в финальном изображении.</p>
<p>Цитата из SVG 1.1 специфирования иллюстрирует это:</p>
<blockquote>
<p>[...] предположим, что агент пользователя может определить из его окружения, что "1px" соответствует "0.2822222мм" (т.е., 90dpi). Тогда для всего обрабатываемого контента SVG: [...] "1см" равен "35.43307px" (и следовательно 35,43307 пользовательских единиц)</p>
</blockquote>
<p>{{ PreviousNext("Web/SVG/Tutorial/Getting_Started", "Web/SVG/Tutorial/Basic_Shapes") }}</p>
|
