В примере этой главы демонстрируются геометрические формы, которые создаются с помощью элементов <rect>, <circle>, <ellipse>, <polygon>, <polyline>, <path>, <g>
В SVG имеется несколько основных геометрических форм:
Эти базовые формы, вместе с траекториями, образуют множество графических форм SVG. В этом документе мы познакомимся с тем, как задаются эти формы и как они комбинируются в сложный рисунок (в нашем примере это изображение телефона). Кроме того, здесь будет вкратце описаны методы группировки различных элементов и задание трансформаций внутри группы.
Обратите внимание: стилевые атрибуты не обсуждаются в этой статье. Но вы можете посмотреть в исходном SVG-файле, как они используются для создания градиентных заливок.
Данное изображение составлено из различных геометрических форм, описанных в формате SVG:
Простые графические формы образуют изображение телефона. Он состоит из следующих частей:
В следующих параграфах мы познакомимся с каждой из этих деталей внимательнее
В нашем примере трубка изображена с помощью двух эллипсов и соединяющего их прямоугольника. Следующих код формирует этот прямоугольник и эллипсы:
<g id="Handset" transform="translate(70, 90)"> <rect y="-30" height="40" width="260" /> <ellipse cy="20" rx="45" ry="50" /> <ellipse cy="20" rx="45" ry="50" transform="translate(260)" /> </g>
Здесь с помощью элемента <g> задается группа объектов с именем "Handset". Начало внутренней системы координат этой группы находится в точке с координатами (100, 60); другими словами, все координаты геометрических форм внутри этого элемента <g> отсчитываются относительно точки с координатами (100, 60) таким образом, что для объектов этой группы эта точка выступает началом координат (0, 0). Мы начинаем с изображения прямоугольника высотой в 20 и шириной 200. Для эллипсов нужно задать дополнительные атрибуты:
Поскольку мы применили элемент <g> для группировки трех составляющих кусочков трубки, мы можем изменить положение трубки на рисунке просто модифицируя значение атрибута transform элемента <g>, для этого нам не нужно изменять координаты каждой элементарной формы.
Следующий пример кода рисует прямоугольники, изображающие рычаг телефона:
<g transform="translate(200, 80)"> <rect x="-30" height="50" width="10" transform="skewX(10)"/> <rect x="-30" height="50" width="10" transform="skewX(-10)" translate(50, 0)"/> </g>
Эти два прямоугольника немного отличаются от первого, поскольку здесь в атрибуте transform описывается свойство "skew" (скос), которое позволяет нам добиться эффекта скоса стоек рычага. Кроме того, здесь мы сдвигаем прямоугольники, задавая их новые начальные точки. Это делается установкой значений атрибутов x и y элементов <rect>
В нашем примере для изображения корпуса телефона мы используем ломаную линию, для изображения наборного поля - многоугольник, а для изображения кнопок - двенадцать окружностей. Мы группируем наборное поле с кнопками, а затем комбинируем эту группу с корпусом телефона и получаем еще одну группу. Следуя такому групповому подходу, если нам понадобится изменить положение наборного поля с кнопками относительно корпуса телефона, нам нужно будет изменить только координаты внутренней группы, не меняя наборного поля и кнопок. Следующий код рисует окружность с заданным центром:
<circle id="phoneKey" cx="0" cy="0" r="14"/>
В элементе <circle> атрибуты cx и cy определяют положение центра окружности, а атрибут r задает ее радиус.
Мы познакомились уже с тремя базовыми геометрическими формами - они обладают легко определяемым контуром. Теперь мы переходим к другим формам, которые требуют для описания своего контура более специфичных данных. Например, следующий код задает наборное поле телефона - определяется элемент <polygon>, имеющий четыре угла, он формирует четырехугольник:
<polygon points="-65,-20 65,-20 65,110 -65,110" />
Важным атрибутом элемента <polygon> является атрибут points. В качестве значения этого атрибута используется список координатных пар точек (два значения для каждой точки). В нашем примере задается прямоугольник, но элемент <polygon> может задавать не только четырехсторонние многоугольники и их стороны могут не быть равными.
Двухмерные фигуры можно задавать и не только как многоугольники. Для этого можно использовать элемент <polyline>. Единственное отличие заключается в том, что элемент <polygon> автоматически закрывает фигуру линией между первой и последней точкой (если они не совпадают), а элемент <polyline> оставляет фигуру открытой. Следующий код рисует корпус телефона как ломаную линию:
<polyline points="-75,0 75,0 80,40 110,50 140,230 -140,230 -110, 50 -80,40 -75,0" />
Траектории в SVG представляют контуры объектов. Одним из наиболее важных атрибутов элемента <path> является атрибут d, который содержит данные, описывающие траекторию. Атрибут d несет инструкции типа "moveto" (переместить), "line" (провести линию), "curve" (провести кривую Безье второй или третьей степени), "arc" (провести дугу) и "closepath" (закрыть траекторию). Все эти инструкции обозначаются какой-нибудь одной буквой (например, "moveto" обозначается символом M). В нашем примере мы используем инструкции "moveto" и "quadratic bezier curve". Следующий код задает кривую, изображающую телефонный шнур:
<path id="cord" d="M 235,130 q 25,0 25,25 q 0,25 25,25 q 25,0 25,
25 q 0,25 25,25 q 25,0 25,25 q 0,25 25,25 q 25,0 25,25 q 0,
25 25,25 q 25,0 25,25" />
В атрибуте d мы сначала задаем инструкцию M, которая дает указание сделать сдвиг к новой точке, от нее начнется кривая. Заглавная M в данном случае означает, что в описании используются абсолютные координаты, а маленькая m - что используются относительные. После того, как мы с помощью инструкции "moveto" определили начальную точку траектории, мы используем инструкцию q для задания сегмента кривой Безье второго порядка. И снова, маленькая q означает, что описание дается в относительных координатах, а заглавная Q - что в абсолютных. Параметрами команды q является серия координатных пар в виде (x1,y1 x,y). Эти координатные пары задают кривую Безье второго порядка, которая проходит из текущей точки в точку с координатами (x,y) используя точку (x1,y1) в качестве контрольной. После выполнения одной инструкции q, текущая точка переместится в соответствии с координатным параметром. Поскольку мы используем относительные координаты, мы можем переместить изображение телефонного шнура, просто изменив координаты начальной точки.
В примере этой главы мы объединили базовые геометрические формы и траектории. Мы не только использовали самые существенные атрибуты каждого элемента, но и использовали комбинации различных элементов и использовали для них групповые атрибуты. Рисуя траектории, мы использовали относительные координаты, так что перемещать траекторию было несложно. За дополнительной информацией, относящейся к использованию и определению базовых геометрических форм, а также относящейся к различным атрибутам элемента <path>, пожалуйста, обращайтесь на официальный сайт W3C SVG.