- Заполнение строки svg элемента окружностями
- Заполнение строки одной, двумя, n окружностями
- Заполнение строки шестью окружностями
- Анимация спирали со строкой, состоящих из кружков
- Анимация изменения формы рамки
- Создаем облака с помощью двух строк stroke-linecap/a>
- Создаем анимацию краев облака
При совместном использование атрибутов stroke-dasharray и stroke-linecap=”round”, можно получить интересные эффекты визуализации.
У stroke-dasharray. два параметра – stroke-dasharray=”черта, пробел”
1. Заполнение строки svg элемента окружностями
для этого необходимо:
- длину черты установить равную нулю – stroke-dasharray=”0, пробел”
- а пробел установить равным ширине строки stroke-width
Итого:
stroke-dasharray=”0, 35″ stroke-width=”35″
при таких значениях параметров, строка элемента будет заполнена окружностями
1 2 3 4 5 |
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" viewBox="0 0 400 400"> <circle cx="200" cy="200" r="150" fill="none" stroke="dodgerblue" stroke-dasharray="0, 35" stroke-width="35" stroke-linecap="round"/> </svg> |