Координаты

Автор: Евгений Рыжков и Тимур Лисица Дата публикации: 21.11.2010

Мир SVG — это бесконечный холст. В этой главе мы обсудим как дать понять браузеру какая именно часть этого холста Вам интересна, каковы размеры этой части и как найти точки на этом участке.

Область просмотра

Участок документа, который будет использоваться для отображения SVG-документа, называется областью просмотра. Его размер можно задать с помощью атрибутов width и height элемента <svg>.

область просмотра имеет свои размеры в отличии от холста

Значением данного атрибута может быть просто число, без указания единиц измерения. Такая запись будет соответствовать пикселям. Вы также можете явно задать единицы измерения ширины и высоты:

em размер относительно размера шрифта, 1em обычно равен высоте символа
ex высота буквы x
px пиксели
рt точка (1/72 дюйма)
рс picas (1/6 дюйма)
cm сантиметры
mm миллиметры
in дюймы
<svg width="200" height="150px">
<svg width="200px" height="200px">

Оба варианта определяют область в 200 пикселей шириной и 150 пикселей высотой.

<svg width="2cm" height="3cm">

Область шириной в 2 сантиметра и высотой 3 сантиметра.

<svg width="2cm" height="36pt">

Можно, хотя это необычно, смешивать единицы измерения. в этом примере определяем участок шириной 2 сантиметра и 36 точек высотой.

Если у Вас один элемент <svg> вложен в другой <svg> элемент, размеры вложенного можно задать в процентах, относительно размеров родителя. Пример вложения увидим в последующих главах. (прим. ред. — вообще <svg> может быть вложен не только в <svg> элемент: в HTML5 можно напрямую вставлять SVG-документ в HTML-документе. Поэтому более справедливым будет сказать, что размеры в процентах могут быть относительно родителя, которым может оказаться любой HTML-контейнер).

Использование системы координат по умолчанию

По умолчанию для элемента <svg>, просмотрщик устанавливает систему координат с двумя осями: X и Y. Значение по оси X (х-координата), увеличивается, если Вы двигаетесь вправо. Для оси Y (у-координата), увеличивается, если двигаетесь вниз. Верхний левый угол графического окна имеет х- и у-координаты равные нулю (*). Эту точку, (0, 0) еще называют началом.

система координат по умолчанию

Система координат является чисто геометрической системой. Точки не имеют ни ширины, ни длины, а линии координатной сетки считаются бесконечно тонкими. Мы еще вернемся к данному вопросу в последующих главах.

* — в данной книге мы пишем координаты в скобках парами: х- и у-координата, где х-координата стоит первой. Т.е., (10, 30) — это 10 по оси X и 30 по — Y.

Определим область просмотра в 200 пикселей шириной и 200 пикселей высотой. После чего нарисуем прямоугольник, верхний левый край которого имеет координаты (10, 10). Ширина прямоугольника будет 50 пикселей, а высота 30.

<svg width="200" height="200">
	<rect x="10" y="10" width="50" height="30" style="stroke: black; fill: none;" />
</svg>
простой прямоугольник Прямоугольник с использованием координат по умолчанию

Даже если Вы вообще не определили единицы измерения в целом, можно их использовать напрямую для SVG элементов:

<svg width="200" height="200">
	<rect x="10" y="10" width="50mm" height="30mm" style="stroke: black; fill: none;" />
</svg>

Если размеры области просмотра заданы в явных единицах измерения, это никак не влияет на остальные элементы. В следующем примере задаем область просмотра с размерами в мм. Прямоугольнику размеры указываем без единиц измерения, при этом его размеры будут пикселях.

<svg width="70mm" height="70mm">
	<rect x="10" y="10" width="50" height="30" style="stroke: black; fill: none;" />
</svg>
размеры области просмотра с единицами измерения, у прямоугольника - нет Размеры области просмотра с единицами измерения, у прямоугольника — нет

Определяем пользовательскую систему координат

В приведенных примерах выше, цифры без единиц измерения считались пикселями. Но это не всегда то, что Вам нужно. Например, Вам хочется установить систему, где бы каждая координата представляла бы 1/16 см (это не образец хорошего дизайна — наследовать не нужно :) ). В данной системе, каждая грань квадрата 40 на 40 будет равна 2.5 см.

Для решения таких задач служит атрибут viewBox элемента <svg>. Значение этого атрибута состоит из четырех цифр, которые задают минимальные значения х- и у-координат, а так же пределы значений по осям.

Итак, для того, чтобы установить систему координат в 16-единиц-на-1-сантиметр для области рисования с размерами 4 сантиметра на 5, используем следующий код:

<svg width="4cm" height="5cm" viewBox="0 0 64 80">

В следующем примере нарисуем домик, котрый будет отображен в пересчитанной системе координат:

<svg width="4cm" height="5cm" viewBox="0 0 64 80">
	<rect x="10" y="35" width="40" height="40" style="stroke: black; fill: none;" />
	<!-- крыша -->
	<polyline points="10 35, 30 7.68, 50 35" style="stroke:black; fill: none;" />
	<!-- двери -->
	<polyline points="30 75, 30 55, 40 55, 40 75" style="stroke:black; fill: none;" />
</svg>

Сетка координат и более темные цифры показывают новую систему координат пользователя. Более светлые цифры расположены с интервалом в 1 сантиметр.

новая система координат пользователя Новая система координат пользователя

Цифры в значении атрибута viewBox, могут быть разделены запятыми или пробелами. Если ширина или длина равна нулю, графика не будет отображаться. Это является ошибкой при определении отрицательного значения для ширины или высоты viewBox.

Куда дальше