Элемент SVG <use>

Элемент SVG <use> позволяет повторно использовать формы SVG, расположенные в других местах документа SVG (включая элементы <g> и <symbol>). Формы могут быть определены внутри или вне элемента <defs> (сделав их видимыми только после использования).

Пример use

Это простая пример элемента <use>:

<svg width="500" height="100">
　　　　<defs>
　　　　　　　　<g id="shape">
　　　　　　　　　　　　<rect x="0" y="0" width="50" height="50"></rect>
　　　　　　　　　　　　<circle cx="0" cy="0" r="50"></circle>
　　　　　　　　</g>
　　　　</defs>
　　　　<use xlink:href="#shape" x="50" y="50"></use>
　　　　<use xlink:href="#shape" x="200" y="50"></use>
　　　　<circle cx="50" cy="50" r="5" style="fill:#0000ff;"></circle>
　　　　<circle cx="200" cy="50" r="5" style="fill:#0000ff;"></circle>
</svg>

Этот пример показывает элемент <g>, определенный в элементе <defs>. Это делает элемент <g> невидимым,除非 он ссылается на него элементом <use>.

Прежде чем ссылаться на элемент <g>, его необходимо настроить с помощью атрибута id. Элемент <use> ссылается на него через атрибут xlink:href. Обратите внимание на символ # перед идентификатором.

Элемент <use> определяет положение повторно используемой формы с помощью атрибутов x и y. Обратите внимание, что формы внутри элемента <g> находятся в положении 0,0. Это делается потому, что их положение добавлено к позициям, указанным в элементе <use>.

Эффект изображения после выполнения:

Голубой кружок не является частью примера. Он добавлен для отображения координат x и y двух элементов <use>.

Использование формы вне элемента <defs>

Элемент <use> может повторно использовать любое положение элемента в SVG-изображении, если у формы есть уникальный идентификатор id. Вот один из примеров:

<svg width="500" height="110">　　　　
<g id="shape2">　　　　
<rect x="0" y="0" width="50" height="50"/>　　　　
</g>　　　　
<use xlink:href="#shape2" x="200" y="50"/>　　　　
<circle cx="200" cy="50" r="5" style="fill:#0000ff;"/>　　　　
</svg>

В этом примере определен элемент <g>, который содержит элемент <rect>. Затем он повторно используется через элемент <use> (включая вложенный элемент <rect>).

Эффект изображения после выполнения:

Обратите внимание, что одновременно показаны исходная форма и ее повторно используемая версия. Это происходит потому, что форма для повторного использования не определена в элементе <defs> или <symbol> (элемент <g>). Поэтому она видна.

Таким же образом, голубой кружок показывает координаты элемента <use>.

Установка стилей CSS

Если на исходной форме не установлены стили CSS, их можно установить при повторном использовании формы. Достаточно указать стили, которые нужно задать в атрибуте style элемента <use>. Вот пример:

<svg width="500" height="110">
　　<g id="shape3">
　　　　　　<rect x="0" y="0" width="50" height="50"/>
　　</g>
　　<use xlink:href="#shape3" x="100" y="50" style="fill: #00ff00;"/>
　　<use xlink:href="#shape3" x="200" y="50" style="stroke: #00ff00; fill: none;"/>
</svg>

Обратите внимание, что на исходной форме не установлено свойство style. Затем будет использоваться стандартный стиль (обычно черный) для рендеринга.