Усложняем жизнь — элементы symbol и image

Для избавления программиста от мучений, связанных с копированием собственного кода при отображении повторяющихся элементов, существует специальный тег, к которому мы уже обращались, — <use>. С помощью него, например, можно легко наполнить веб-страницу всем порядком надоевшими новогодними снежинками, ну или просто вот такими мячиками (рис. 61):

<svg>

<circle id="ball" cx="110" cy="114" r="12" stroke="green" fill="gray" stroke-width = "4" />

<use xlink:href="#ball" x="70" y="100"/>

<use xlink:href="#ball" x="180" y="200"/>

<use xlink:href="#ball" x="230" y="300"/>

<use xlink:href="#ball" x="370" y="150"/>

<use xlink:href="#ball" x="480" y="250"/>

<use xlink:href="#ball" x="330" y="350"/>

<use xlink:href="#ball" x="170" y="180"/>

<use xlink:href="#ball" x="280" y="280"/>

<use xlink:href="#ball" x="230" y="380"/>

</svg>

Впрочем, это самый общий случай использования данного элемента. Use может запросто ссылаться и на группу объектов, и даже на внешний документ:

<use xlink:href=”store. svg#logo_1” x=”100” y=”100” />

Элемент use позволяет продемонстрировать еще один интересный группирующий объект — <symbol>. Он инкапсулирует фигуру или группу фигур, скрывая исходные объекты и позволяя применять такой инструмент, как viewBox и preserveAspectRatio, который может определить выравнивание отмасштабированного изображения относительно области просмотра. То есть preserveAspectRatio определяет поведение для отображения фигуры, не уместившейся в области видимости, оно может быть обрезано или сжато. В примере ниже мы упаковываем в <symbol> уже нарисованную нами звезду, отрезав все выступающее при отображении (рис. 62):

<svg width=”240px” height=”240px” viewBox=”0 0 240 240”>

<symbol id=”star”

PreserveAspectRatio=”xMidYMid slice” viewBox=”20 10 420 720” >

<polygon style=”fill-rule: fill-rule было nonzero; fill: red; stroke: yellow;” points=”96,32 32,192 192,96 0,96 160,192” />

</symbol>

<use xlink:href=”#star” x=”100” y=”110” width=”400” height=”620” />

</svg>

А как в svg с использованием готовых изображений? Да все в порядке. В этом нам поможет элемент <image>, который может ссылаться как на растовые изображения, так и на готовые svg-файлы (но не на объекты внутри них!):

<svg width=”300px” height=”300px”>

<ellipse cx=”150” cy=”150” rx=”150” ry=”120” style=”fill: #cceeff;”/> <image xlink:href=”moby. png” x=”70” y=”90” width=”160” height=”120”/>

</svg>

Атрибуты тега <image> указывают координаты верхнего левого угла изображения, его ширину и высоту. Результат — на рисунке.

Рис. 62. SVG-приложение с использованием Raphael