From c058fa0fb22dc40ef0225b21a97578cddd0aaffa Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:51:05 +0100 Subject: unslug ru: move --- files/ru/web/svg/tutorial/positions/index.html | 48 ++++++++++++++++++++++++++ 1 file changed, 48 insertions(+) create mode 100644 files/ru/web/svg/tutorial/positions/index.html (limited to 'files/ru/web/svg/tutorial/positions/index.html') diff --git a/files/ru/web/svg/tutorial/positions/index.html b/files/ru/web/svg/tutorial/positions/index.html new file mode 100644 index 0000000000..7a660c2d0f --- /dev/null +++ b/files/ru/web/svg/tutorial/positions/index.html @@ -0,0 +1,48 @@ +--- +title: Расположение (позиции) +slug: Web/SVG/Tutorial/Позиции +tags: + - SVG + - 'SVG:Руководство' +translation_of: Web/SVG/Tutorial/Positions +--- +

{{ PreviousNext("Web/SVG/Tutorial/Getting_Started", "Web/SVG/Tutorial/Basic_Shapes") }}

+ +

Сетка

+ +

SVG для всех элементов использует систему координат или сеточную систему, схожую с той, что используется canvas (и множеством других стандартных компьютерных программ для рисования). Здесь верхний левый угол документа принимается за точку (0,0). Затем позиции измеряются в пикселях от верхнего левого угла с положительным направлением x, уходящим вправо, и положительным направлением y, уходящим вниз. Заметьте, что это направление противоположно тому, к которому мы привыкли с детства. Однако, именно этим способом располагаются элементы HTML.

+ +

Пример:

+ +

Элемент

+ +
<rect x="0" y="0" width="100" height="100" />
+
+ +

определяет прямоугольник от верхнего левого угла, который простирается оттуда на 100px вправо и вниз.

+ +

Что такое "пиксели"?

+ +

В наиболее общем случае один пиксель в документе SVG отображает один пиксель в устройстве вывода (a.k.a. экран). Но SVG формат не назывался бы "Маcштабируемым" (от англ. scalable), если не было бы некоторых возможностей изменить такое поведение. Большинство как абсолютных, так и относительных размеров шрифтов в CSS, SVG определяет абсолютными единицами (с размерными обозначениями "pt" или "cm") и, так называемыми, пользовательскими единицами без идентификаторов, являющиеся простыми цифрами.

+ +

Без дополнительного уточнения, одна пользовательская единица равна одной единице экрана. Чтобы явно изменить такое поведение, в SVG существуют некоторые возможности. Мы начинаем с корневого элемента svg:

+ +
<svg width="100" height="100">
+
+ +

Вышеупомянутый элемент определяет простое полотно SVG размером 100x100px. Одна пользовательская единица равна одной единице экрана.

+ +
<svg width="200" height="200" viewBox="0 0 100 100">
+
+ +

Всё полотно SVG здесь имеет размер 200px на 200px. Однако, атрибут viewBox определяет часть этого полотна, которая будет отображаться. Эти 200x200 пикселей показывают область, которая начинается на пользовательской единице (0,0) и простирается на 100x100 пользовательских единиц вправо и вниз. Эффективное изменение масштаба в области 100x100 единиц увеличивает изображение до двойного размера.

+ +

Текущее отображение (для единичного элемента или всего изображения) пользовательских единиц в экранные единицы называется системой пользовательских координат. Помимо масштабирования, систему координат можно также вращать, смещать и переворачивать. Система пользовательских координат по умолчанию отображает один пользовательский пиксель на один пиксель устройства. (При этом, устройство может решать, что понимать под одним пикселем.) Длины в файле SVG с особенными расширениями, такими как "in" или "cm" затем вычисляются таким образом, чтобы выразить их как 1:1 в финальном изображении.

+ +

Цитата из SVG 1.1 специфирования иллюстрирует это:

+ +
+

[...] предположим, что агент пользователя может определить из его окружения, что "1px" соответствует "0.2822222мм" (т.е., 90dpi). Тогда для всего обрабатываемого контента SVG: [...] "1см" равен "35.43307px" (и следовательно 35,43307 пользовательских единиц)

+
+ +

{{ PreviousNext("Web/SVG/Tutorial/Getting_Started", "Web/SVG/Tutorial/Basic_Shapes") }}

-- cgit v1.2.3-54-g00ecf