Элемент <defs> SVG

Элемент <defs> SVG используется для внедрения определений, которые можно повторно использовать в изображении SVG. Например, вы можете группировать SVG-формы и повторно использовать их в качестве одной формы.

Пример defs

Вот пример простого элемента <defs>:

<svg>
　　　　<defs>
　　　　　　　　<g>
　　　　　　　　　　　　<rect x="100" y="100" width="100" height="100"/>
　　　　　　　　　　　　<circle cx="100" cy="100" r="100"/>
　　　　　　　　</g>
　　　　</defs>
</svg>

Формы, определенные в элементе <defs>, не отображаются в изображении SVG. Перед их отображением они должны быть упомянуты в элементе <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>, необходимо установить для него ID через атрибут id. Элемент <use> ссылается на элемент <g> через атрибут xlink:href. Обратите внимание на символ # перед ID в значении атрибута.

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

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

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

Какие элементы можно определить в элементе <defs>?

Вы можете поместить следующие элементы в элемент <defs>:

• Любой элемент формы (rect, line и т.д.)

• g

• symbol