Как создать самонарисовывающуюся SVG-анимацию в CSS.
Чтобы создать самонарисовывающуюся SVG-анимацию, вам необходимо:
- Установите значения
stroke-dasharray
иstroke-dashoffset
равными длине пути; - Измените значение смещения
stroke-dashoffset
от длины пути до 0.
svg > * { // SVG
--path-length: 367;
stroke-dasharray: var(--path-length);
stroke-dashoffset: var(--path-length);
transition: stroke-dashoffset .5s;
}
svg:hover > * {
stroke-dashoffset: 0;
}
Увеличивая значение stroke-dasharray
, вы заменяете обводку узором из штрихов и пробелов. Чем выше значение stroke-dasharray
, тем больше длина пробелов и штрихов. Вам нужно будет увеличить это значение (stroke-dasharray
) до точки, где не будет виден промежуток, а у вас будет только один штрих (dash length = path length
).
С другой стороны, значение stroke-dashoffset
используется для смещения черточки. Если установить его равным длине пути, прочерк исчезнет.
При желании вы можете получить длину пути в JavaScript:
(function() {
var svgObj = document.getElementsByClassName('self-draw-anim__obj');
if(svgObj.length > 0) {
console.log(svgObj[0].getTotalLength());
}
}());
Класс .self-draw-anim__obj
в приведенном выше примере кода применяется к пути SVG, который вы хотите анимировать:
<svg class="self-draw-anim__decoration" viewBox="0 0 156 40" preserveAspectRatio="none" aria-hidden="true"><br /> <!-- 👇 --><br /> <path <br /> class="self-draw-anim__obj"<br /> d="M77.867,1.875l-59.314,13.4C13.5,16.418,8.184,17.689,4.406,21.139c-1.421,1.3-2.631,3.081-2.37,4.956A5.586,5.586,0,0,0,3.49,28.908c2.143,2.449,5.293,3.852,8.445,4.847A73.518,73.518,0,0,0,27.41,36.55c8.793.8,17.637.89,26.469.975q20.22.2,40.44.378a179.741,179.741,0,0,0,21.225-.657c7.9-.87,15.638-2.778,23.345-4.681,3.058-.755,6.19-1.542,8.785-3.282s4.584-4.66,4.261-7.7c-.5-4.659-5.718-7.245-10.311-8.717C117.7,5.2,92.044,4.657,66.842,4.365,54.984,4.228,43.011,4.14,31.413,6.534"<br /> fill="none"<br /> stroke-miterlimit="10"<br /> stroke="currentColor" /><br /></svg>
Если вы не хотите, чтобы SVG сохранял свое соотношение сторон (установленное в окне просмотра), примените preserveAspectRatio = "none"
к элементу SVG. В демонстрации ниже, например, SVG адаптируется к размеру текста.
Вот демонстрация:
Вот и всё!