Элемент 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"
        xmlns="http://www.w3.org/2000/svg">
        <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
Опера

HTML

Элемент SVG <symbol>

РЕКОМЕНДУЕМЫЕ СТАТЬИ