Online Tool Store
SVG Animator
Анімуйте елементи SVG за допомогою ключових кадрів CSS і переходів, встановіть час, послаблення та цикли, потім експортуйте анімовані файли SVG.
🔒 Цей інструмент працює повністю у вашому браузері. Ваші файли ніколи не завантажуються на сервер.
Дизайн і колір
SVG Animator
Preview
Draw works best on stroked <path> shapes. This SVG looks fill-only, so the outline may not appear to draw — the original artwork is left intact.
Generated CSS
Everything runs in your browser. Your SVG is never uploaded to a server.
Як працює Аніматор SVG
- Додайте SVG і виберіть тип анімації.
- Задайте тривалість і плавність — ефекти малювання найкраще виглядають від однієї до двох секунд.
- Збережіть захист reduced-motion, потім вставте SVG та його CSS на свою сторінку.
Метод
Ефект малювання працює так: візерунок штриха встановлюється на повну довжину шляху, а зміщення анімується від цієї довжини до нуля.
stroke-dasharray: L; stroke-dashoffset: L → 0, де L — довжина шляху
Неправильне значення L — причина, чому анімації малювання іноді починаються частково намальованими або закінчуються раніше часу — візерунок штриха має відповідати реальній довжині шляху.
FAQ
Чому моя анімація малювання починається наполовину?
Тому що значення dasharray не відповідає реальній довжині шляху. Виміряйте шлях за допомогою getTotalLength і використовуйте це число, а не оцінюйте його.
Чи варто анімувати SVG за допомогою CSS чи SMIL?
CSS — для всього нового. Анімація SMIL застаріла в деяких рушіях, а підтримка непослідовна; ключові кадри та трансформації CSS добре підтримуються і легше контролюються.
Навіщо враховувати prefers-reduced-motion?
Тому що рух викликає нудоту та вестибулярні симптоми в деяких людей, а налаштування операційної системи — це спосіб попросити менше руху. Врахування цього — це медіа-запит із двох рядків.
Як ми порівнюємось
| Характеристика | Online Tool Store | Дизайн-застосунок | PDF-посібник зі стилю |
|---|---|---|---|
| Захист reduced-motion включено | ✓ | ✗ | Рідко |
| CSS замість SMIL | ✓ | По-різному | ✓ |
| Не потрібне ПЗ для анімації | ✓ | ✗ | ✗ |
| Файл залишається на вашому пристрої | ✓ | ✓ | ✗ |
Аніматор SVG за замовчуванням огортає кожну анімацію запитом reduced-motion — крок доступності, який вручну написана SVG-анімація майже завжди пропускає.