<symbol>

Элемент <symbol> используется для определения графических шаблонов объектов, которые могут быть созданы элементом <use>.

Использование элементов <symbol> для графики, используемой несколько раз в одном документе, добавляет структуру и семантику. Документы с богатой структурой могут быть отображены графически, в виде речи или в формате Брайля, что способствует доступности.

Пример

html

<svg viewBox="0 0 80 20" xmlns="http://www.w3.org/2000/svg">
  <!-- Our symbol in its own coordinate system -->
  <symbol id="myDot" width="10" height="10" viewBox="0 0 2 2">
    <circle cx="1" cy="1" r="1" />
  </symbol>

  <!-- A grid to materialize our symbol positioning -->
  <path
    d="M0,10 h80 M10,0 v20 M25,0 v20 M40,0 v20 M55,0 v20 M70,0 v20"
    fill="none"
    stroke="pink" />

  <!-- All instances of our symbol -->
  <use href="#myDot" x="5" y="5" style="opacity:1.0" />
  <use href="#myDot" x="20" y="5" style="opacity:0.8" />
  <use href="#myDot" x="35" y="5" style="opacity:0.6" />
  <use href="#myDot" x="50" y="5" style="opacity:0.4" />
  <use href="#myDot" x="65" y="5" style="opacity:0.2" />
</svg>

Атрибуты

height: Этот атрибут определяет высоту символа. Тип значения: <length>|<percentage> ; Значение по умолчанию: auto; Анимируемо: да
preserveAspectRatio: Этот атрибут определяет, как фрагмент svg должен быть деформирован, если он вставлен в контейнер с другим соотношением сторон. Тип значения: (none| xMinYMin| xMidYMin| xMaxYMin| xMinYMid| xMidYMid| xMaxYMid| xMinYMax| xMidYMax| xMaxYMax) (meet|slice)? ; Значение по умолчанию: xMidYMid meet; Анимируемо: да
refX: Этот атрибут определяет координату x опорной точки символа. Тип значения: <length>|<percentage>|left|center|right ; Значение по умолчанию: Нет; Анимируемо: да
refY: Этот атрибут определяет координату y опорной точки символа. Тип значения: <length>|<percentage>|top|center|bottom ; Значение по умолчанию: Нет; Анимируемо: да
viewBox: Этот атрибут определяет область видимости холста SVG для текущего символа. Тип значения: <list-of-numbers> ; Значение по умолчанию: нет; Анимируемо: да
width: Этот атрибут определяет ширину символа. Тип значения: <length>|<percentage> ; Значение по умолчанию: auto; Анимируемо: да
x: Этот атрибут определяет координату x символа. Тип значения: <length>|<percentage> ; Значение по умолчанию: 0; Анимируемо: да
y: Этот атрибут определяет координату y символа. Тип значения: <length>|<percentage> ; Значение по умолчанию: 0; Анимируемо: да

Контекст использования

Категории Элемент контейнера, структурный элемент

Разрешенное содержимое Любое количество следующих элементов в любом порядке:
Элементы анимации
Элементы описания
Элементы форм
Структурные элементы
Элементы градиента
<a>, <clipPath>, <cursor>, <filter>, <font>, <font-face>, <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view>

Категории	Элемент контейнера, структурный элемент
Разрешенное содержимое	Любое количество следующих элементов в любом порядке: Элементы анимации Элементы описания Элементы форм Структурные элементы Элементы градиента `<a>`, `<clipPath>`, `<cursor>`, `<filter>`, `<font>`, `<font-face>`, `<foreignObject>`, `<image>`, `<marker>`, `<mask>`, `<pattern>`, `<script>`, `<style>`, `<switch>`, `<text>`, `<view>`

Примечание: сам элемент <symbol> не предназначен для отображения. Только экземпляры элемента <symbol> (т.е., ссылка на <symbol> элементом <use>) отображаются. Это означает, что некоторые браузеры могут отказаться от прямого отображения элемента <symbol> даже если свойство CSS display указывает на другое.

Спецификации

Спецификация
Scalable Vector Graphics (SVG) 2 # SymbolElement

Совместимость с браузерами

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`symbol`	1	12	1.5	9	3	18	4	10.1	2	1.0	3
`preserveAspectRatio`	1	79	1.5	15	3	18	4	14	2	1.0	4.4
`viewBox`	1	79	1.5	15	3	18	4	14	2	1.0	4.4

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/symbol