Группируй и властвуй

Просто повторять рисунок неинтересно. Давайте на его примере освоим технологию SVG-трансформации. Для того чтобы применять преобразования ко всему рисунку, с помощью тега <g> организуем группу:

<g id="face">

ШРожица/Ш

<circle cx="150" cy="150" r="100" style="stroke: green; fill: none;stroke-width : 10" />

</g>

Контейнер <g></g>, собственно, и существует с одной целью — объединить в группу все свои дочерние элементы (кстати, второй группирующий элемент — <defs> — мы уже встречали, тут он не очень подходит). К нему можно применить стили, которые будут наследоваться, внутри него можно с помощью тегов <tittle> и <desc> задать заголовок и описание группы. Зачем?

Да для поисковых систем и прочих программ автоматического анализа веб-контента (визуально эти элементы отражены не будут). Группы могут быть вложены друг в друга, и (собственно, самое главное) к ним могут быть применены единые правила трансформации. Чем мы и воспользуемся:

<use xlink:href="#face" Gransform="cale(1 0.5) Ganslate(0 460)" />

Мы применили к группе простую операцию трансформации.

Элемент <use> предоставляет функции копирования для группы элементов, объединенных с помощью <g>. Теперь его можно вставить в любое место страницы, с заданными координатами А атрибут transform позволяет делать это творчески — трансформировать скопированное изображение.

Сначала мы масштабируем картинку по вертикали, затем сплюснутое изображение сдвигаем вниз по оси у. Результат — на рисунке, вот, правда, это немного не то, что я задумал (рис. 59). Я хочу получить нечто вроде отражения, поэтому чуть поменяем параметры:

<use xlink:href="#whiskers" transform="cale(1 -0.5) ranslate(10 -780)" />

Рис. 59. Пытаемся сделать отражение

Использовав отрицательное значение в cale, мы инвертировали систему координат по вертикали. Теперь приходится присваивать перемещению отрицательное значение, но зато трансформированная рожица теперь, как и положено, перевернута (рис. 60).