Примеры анимации масок SVG

Анимация масок реализуется за счет анимации элементов svg, входящих в состав маски. Составными частями маски могут быть любые базовые фигуры SVG: Line, circle, ellipse, polyline, polygon, rect, а также path любой формы.

Маска может работать в нескольких режимах

1. Обрезать всё, что находится вне зоны действия маски, то есть этот режим подобен действию clipPath
2. Вырезать, например в изображении отверстие в форме маски, показывая тем самым всё, что находится ниже изображения.
В примере ниже в состав маски входят прямоугольник и окружность. Изменяя радиус окружности, можно менять размер круглой маски, увеличивая или уменьшая размер круглого отверстия сквозь, которое становится видимым нижнее градиентные полосы.

Продолжить чтение

Mask SVG, маски SVG


У маски только один обязательный параметр, её ID, с помощью которого она ассоциируется с объектом, к которому применена. Остальные параметры x, y, width и height опциональны.
Маски обладают широкими возможностями для изменения, украшения и анимирования растровыx и векторныx изображений.
Во первых они могут обрезать изображения, по заданной форме как clipPath
Но в отличии от clipPath маска не только вырезает, но и есть у неё возможность оформить оставшуюся часть изображения с помощью непрозрачности. Как в примере выше.
В теги mask можно добавить один или несколько элементов svg: line, circle, ellipse, rect, polyline, polygon, path
Присваивая этим элементам различные цвета заполнения можно получать участки изображения с разной непрозрачностью.
Продолжить чтение

Анимации с использованием stroke-dasharray и stroke-dashoffset

Для создания разнообразных примеров прогрессбаров, лоадеров и других анимированных объетов, применение stroke-dashharray, stroke-dashoffset является основным способом.
В статье: Анимация рисования линии используется только изменение атрибута stroke-dashoffset от максимума до нуля.
Но если использовать комбинацию stroke-dasharray и stroke-dashoffset, то можно получить интереснейшие эффекты.

Начнем со стандартной техники реализации прогрессбара

Форма прогрессбара неважна, она может быть любой,- или прямая линия или замкнутая фигура.
Главное это правильно указать максимальную длину контура.
Увеличение заполняющей полосы прогрессбара может быть реализовано двумя способами:

1. Изменение stroke-dashoffset от максимума до нуля

icon Lion-break


Полная длина окружности равна
C = 2 x PI x R или 2 x 3.14 x 50 = 314px
При stroke-dashoffset = “314” линия будет полностью скрыта
При stroke-dashoffset = “0” линия будет полностью видна

Изменяя значение Stroke-dashoffset от максимума до нуля получим эффект заполнения прогрессбара

Продолжить чтение

Многострочный tooltip в SVG

Тултип, – всплывающая подсказка при наведении курсора, есть во многих программных продуктах.
В svg тултип реализуется с помощью парного тега <title> Текст подсказки </title>

Чтобы тултип начал показываться при наведении курсора на объект, необходимо объект обернуть групповыми тегами <g>

К сожалению тултипы не подлежат стилизации: невозможно изменить цвет, размер шрифта и другие текстовые атрибуты
Пример однострочного тултипа

При наведении на каждую окружность, элипс и удержания курсора некоторое время на объекте, должна появиться всплывающая подсказка для этого объекта.

Пример многострочного тултипа
На просторах интернета не встречал подобного решения, так что можно считать это Ноу-хау, которым поделюсь с вами.

Многострочный тултип реализуется с помощью вложенных друг в друга тегов <title>
Структура вложения следующая:

Внутрь первой пары <title>, которая идёт без текста вкладываются последовательно парные теги <title> с текстом ….. </title>. Каждая пара отвечает за свою отдельную строку многострочного тултипа
Допускается добавлять символы Unicode.
В примере ниже я добавил в заголовки символ сдвоенного прямоугольника – ⧉ и несколько символов unicode отображающие черту, для визуального разделения заголовков и остального текста ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯


Наведите курсор на центральный круг и появится многострочная подсказка. На остальных элементах остались одно строчные тултипы.

⇚ Как добавить SVG в HTML5 страницу
Следующая ⇛  Масштабирование векторных изображений

Стилизация svg файла, добавленного в HTML с помощью img

Когда файл SVG добавлен на страницу HTML с помощью тега <img>, то он ничем не отличается от обычного изображения растрового формата. Поэтому невозможно применить стили из внешней таблицы.
Но есть возможность изменить цвет фигур svg с помощью фильтров CSS или SVG.

Цвет SVG фильтра можно установить любой. В примере ниже изображение будет покрашено в синий цвет

При использовании двух фильтров с разными цветами закраски можно реализовать смену цветов изображения при наведении курсора.

Ниже полный код программы реализующий смену цвета закраски при наведении:

Обратите внимание, что в шапке SVG кода, – width=”0″ height=”0″
Это сделано для того, чтобы блок SVG не имел размеров и не мешал разметке HTML.

⇚ Как добавить SVG в HTML5 страницу
Следующая ⇛  Масштабирование векторных изображений

Генератор keyTimes


Генератор keyTimes позволяет визуально настроить разные темпы анимации на разных участках пути анимируемого объекта.
У генератора изменяются два атрибута: по оси “Х” – keyTimes, по оси “Y” – values
Перетаскивая красную контрольную точку строго по горизонтали, мы тем самым меняем значение keyTimes для данного отрезка пути, указанного в соответствующем атрибуте values.
Количество значений keytimes и values должно совпадать.
Значения keyTimes указываются в долях от единицы, каждое значение разделено точкой с запятой. keyTimes=” 0;0.25;0.5;0.75;1″
В итоге суммарная единица keyTimes равна общей продолжительности анимации.
Пример использования keyTimes генератора

Выберем график анимации, как на картинке ниже

график keyTimes

По графику видно, что первые две трети пути идёт приращение скорости, а на остальной части пути – падение скорости.
Чтобы это было наглядно, в примере ниже для для бордового прямоугольника использовал значение keyTimes для придания неравномерности движения. Синий прямоугольник движется в соответствии с атрибутами по умолчанию. То есть скорость анимации для него зависит только от соотношения длины пути и времени.


Как и было задано атрибутом keyTimes бордовый прямоугольник обгоняет на первой дистанции пути синий прямоугольник, который движется равномерно, но в конце пути бордовый прямоугольник уменьшает скорость и синий прямоугольник догоняет его. На финиш оба прямоугольника приходят одновременно. Так как длина пути и общее время анммации для обоих прямоугольников было одинаково.

Ещё один пример с использование keyTimes.
Смайлик, который подмигивает одним глазом при клике.

⇚ Генератор keysplines
Следующая ⇛  Безье второго порядка