Animacje SVG po przyciśnięciu

Question

Witam

Stworzyłem kilka obiektów przy użyciu <path> i chcę je zanimować. Gdyby chodziło jednak tylko o to, to bym sobie poradził. Muszą to być animacje aktywowane po przyciśnięciu danego obrazka. Próbowałem wielu rzeczy, przejrzałem wiele stron oraz obejrzałem wiele filmików, jednak żaden nie był w stanie mi tego ładnie wyjaśnić.

Comments

Próbowałem wielu rzeczy, przejrzałem wiele stron oraz obejrzałem wiele filmików, jednak żaden nie był w stanie mi tego ładnie wyjaśnić.

Może podaj konkretne linki do stron, które przejrzałeś, które ewentualnie Ciebie zainteresowały i opisz dokładnie czego nie rozumiesz na danej stronie. 

---

Tutaj nie chodzi o niezrozumienie, ale o treść przekazaną. Owe filmy/strony nie odpowiadały na moje pytania. Dotyczyły one przeważnie animacji przy użyciu <circle> i innych gotowych figur podczas gdy to koniecznie muszą być <path>. Był tylko jeden film https://www.youtube.com/watch?v=HcGvR1otGQA&ab_channel=WebCraftie , jednak tłumaczył on robienie tylko animacji polegającej na zmianie koloru a moje próby przerobienia owej animacji na inną kończyły się fiaskiem.

---

To może to:

Libraries for SVG Drawing Animations
vivus, bringing your SVGs to life

Answer 1

https://codepen.io/Icelify/pen/JjKgxZB

Zrobiłem prostą animację na click, z użyciem input checkbox w samym css.

Jeśli chcesz inny efekt (np. żeby animacja uruchamiała się od nowa za każdym kliknięciem, to daj znać)