Элемент SVG <symbol>
Опубликовано: 25 Февраля, 2022
SVG - это масштабируемая векторная графика. Его можно использовать для создания графики и анимации, как в холсте HTML.
Элемент SVG <symbol> используется для определения объектов графического шаблона, экземпляры которых могут быть созданы с помощью элемента <use>. Использование элементов символа для графики, которые используются несколько раз в одном документе, добавляет структуру и семантику.
Синтаксис:
<атрибут символа = ""> содержание здесь </symbol>
Атрибут:
- x: ось x координирует положение изображения.
- y: ось y координирует положение изображения.
- width: ширина изображения.
- height: Высота изображения.
- viewBox: граница элемента SVG.
- Глобальные атрибуты: используются некоторые глобальные атрибуты, такие как основные атрибуты, атрибуты стиля и т. Д.
Пример 1:
Вывод: символ точки.
Example 2:
<!DOCTYPE html> < html > < body > < svg viewBox = "0 0 80 20" < symbol id = "circ" width = "10" height = "10" viewBox = "0 0 2 2" > < rect height = "10" width = "10" /> </ symbol > < use xlink:href = "#circ" x = "5" y = "5" opacity = "0.5" fill = "green" /> </ svg > </ body > </ html > |
Выход:
Поддерживаемые браузеры: этот элемент SVG поддерживает следующие браузеры:
- Хром
- Край
- Fire Fox
- Сафари
- Internet Explorer
- Опера