Работа с SVG в UIkit 3
Вставляйте встроенные изображения SVG в разметку страницы и стилизуйте их с помощью CSS.
Формат SVG применяется повсеместно, благодаря свойствам векторных изображений. Например, для отображения логотипа, который не теряет качество при масштабировании или анимировании. Компонент SVG обеспечивает больший контроль над стилями, анимацией и трансформацией изображения. Векторное изображение внедряется в разметку как встроенный SVG, включающий все атрибуты, например, ширина и высота, поэтому они могут быть изменены с помощью CSS.
Использование компонента SVG
Добавьте аттрибут uk-svg к элементу <img>.
<img src="" uk-svg>
Атрибут uk-svg также позволяет вставлять символы из файла SVG с помощью вызова по ID.
-
<!-- Выводим SVG как изображение --> <img src="../assets/uikit/src/images/icons/cloud-download.svg" width="40" height="40" uk-svg> <!-- Выводим Symbol из SVG по ID --> <img src="../assets/uikit/tests/images/icons.svg#cloud-upload" width="40" height="40" uk-svg>
Внимание SVG адаптирует текущий цвет к своей обводке и цвету заливки.
Чтобы избежать этого, добавьте класс .uk-preserve для самого SVG или для элементов внутри него.
Анимация SVG штрихов
Существует два способа анимировать штрихи SVG.
- Используйте компонент Анимация вместе с конструкцией
uk-svg="stroke-animation: true". - Второй вариант позволяет анимировать SVG вместе с компонентом Параллакс.
Опции компонента
Любой из этих параметров может быть применен к атрибуту компонента. Отделяйте опции друг от друга точкой с запятой. Подробнее об этом смотрите в конфигурации.
| Опция | Значение | По умолчанию | Описание |
|---|---|---|---|
src |
String | '' |
Адрес url. Также можно инлайнить через <symbol>, который имеет ID. |
stroke-animation |
Boolean | false |
Анимирует все элементы с помощью stroke атрибута в SVG. |
JavaScript
Подробная документация по компоненту JavaScript.
Инициализация
UIkit.svg(element, options);
Свойства
svg
Промисы JavaScript, которые добавляют узел SVG.
UIkit.svg(element).svg.then(function(svg) { svg.querySelector('path').style.stroke = 'red'; })