При совместном использование атрибутов stroke-dasharray и stroke-linecap=”round”, можно получить интересные эффекты визуализации.
У stroke-dasharray. два параметра – stroke-dasharray=”черта, пробел”
1. Заполнение строки svg элемента окружностями
для этого необходимо:
длину черты установить равную нулю – stroke-dasharray=”0, пробел”
а пробел установить равным ширине строки stroke-width
Итого: stroke-dasharray=”0, 35″ stroke-width=”35″
при таких значениях параметров, строка элемента будет заполнена окружностями
Анимация масок реализуется за счет анимации элементов svg, входящих в состав маски. Составными частями маски могут быть любые базовые фигуры SVG: Line, circle, ellipse, polyline, polygon, rect, а также path любой формы.
Маска может работать в нескольких режимах
1. Обрезать всё, что находится вне зоны действия маски, то есть этот режим подобен действию clipPath
2. Вырезать, например в изображении отверстие в форме маски, показывая тем самым всё, что находится ниже изображения.
В примере ниже в состав маски входят прямоугольник и окружность. Изменяя радиус окружности, можно менять размер круглой маски, увеличивая или уменьшая размер круглого отверстия сквозь, которое становится видимым нижнее градиентные полосы.
1
2
3
4
5
6
7
8
9
<!-- Маска -->
<mask id="msk1" >
<rect width="100%"height="100%"fill="black" />
<circle cx="300"cy="300"r="0"fill="white" >
<!-- Анимация маски прорезающей радиальный градиент и показывающей фоновое изображение -->
У маски только один обязательный параметр, её ID, с помощью которого она ассоциируется с объектом, к которому применена. Остальные параметры x, y, width и height опциональны.
Маски обладают широкими возможностями для изменения, украшения и анимирования растровыx и векторныx изображений.
Во первых они могут обрезать изображения, по заданной форме как clipPath
Но в отличии от clipPath маска не только вырезает, но и есть у неё возможность оформить оставшуюся часть изображения с помощью непрозрачности. Как в примере выше.
В теги mask можно добавить один или несколько элементов svg: line, circle, ellipse, rect, polyline, polygon, path
Присваивая этим элементам различные цвета заполнения можно получать участки изображения с разной непрозрачностью. Продолжить чтение →
Для создания разнообразных примеров прогрессбаров, лоадеров и других анимированных объетов, применение stroke-dashharray, stroke-dashoffset является основным способом.
В статье: Анимация рисования линии используется только изменение атрибута stroke-dashoffset от максимума до нуля.
Но если использовать комбинацию stroke-dasharray и stroke-dashoffset, то можно получить интереснейшие эффекты.
Начнем со стандартной техники реализации прогрессбара
Форма прогрессбара неважна, она может быть любой,- или прямая линия или замкнутая фигура.
Главное это правильно указать максимальную длину контура. Увеличение заполняющей полосы прогрессбара может быть реализовано двумя способами:
1. Изменение stroke-dashoffset от максимума до нуля
Полная длина окружности равна C = 2 x PI x R или 2 x 3.14 x 50 = 314px
При stroke-dashoffset = “314” линия будет полностью скрыта
При stroke-dashoffset = “0” линия будет полностью видна
Изменяя значение Stroke-dashoffset от максимума до нуля получим эффект заполнения прогрессбара
Тултип, – всплывающая подсказка при наведении курсора, есть во многих программных продуктах.
В svg тултип реализуется с помощью парного тега <title> Текст подсказки </title>
Чтобы тултип начал показываться при наведении курсора на объект, необходимо объект обернуть групповыми тегами <g>
1
2
3
4
5
6
7
8
9
10
11
12
<g>
<title>Первый атом</title>
<circle cy="-44"r="9"/>
</g>
<g>
<title>Второй атом</title>
<circle cx="40"cy="18"r="9"/>
</g>
<g>
<title>Третий атом</title>
<circle cx="-40"cy="18"r="9"/>
</g>
К сожалению тултипы не подлежат стилизации: невозможно изменить цвет, размер шрифта и другие текстовые атрибуты
Пример однострочного тултипа
При наведении на каждую окружность, элипс и удержания курсора некоторое время на объекте, должна появиться всплывающая подсказка для этого объекта.
Пример многострочного тултипа
На просторах интернета не встречал подобного решения, так что можно считать это Ноу-хау, которым поделюсь с вами.
Многострочный тултип реализуется с помощью вложенных друг в друга тегов <title>
Структура вложения следующая:
<title>Плотность (при н. у.) газ: 1,42897 кг/м³ </title>
<title>Температура плавления 54,8 К (-218,35 °C) </title>
<title>Температура кипения 90,19 К (-182,96 °C) </title>
</title>
<circle fill="#80a3cf"r="13"/>
</g>
Внутрь первой пары <title>, которая идёт без текста вкладываются последовательно парные теги <title> с текстом ….. </title>. Каждая пара отвечает за свою отдельную строку многострочного тултипа
Допускается добавлять символы Unicode.
В примере ниже я добавил в заголовки символ сдвоенного прямоугольника – ⧉ и несколько символов unicode отображающие черту, для визуального разделения заголовков и остального текста ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
Наведите курсор на центральный круг и появится многострочная подсказка. На остальных элементах остались одно строчные тултипы.
Когда файл SVG добавлен на страницу HTML с помощью тега <img>, то он ничем не отличается от обычного изображения растрового формата. Поэтому невозможно применить стили из внешней таблицы.
Но есть возможность изменить цвет фигур svg с помощью фильтров CSS или SVG.
Цвет SVG фильтра можно установить любой. В примере ниже изображение будет покрашено в синий цвет
