Animacja SVG

Question

Witam, mam taki pliczek svg

<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg height="32px" id="Layer_1" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2  s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2  S29.104,22,28,22z"/></svg>

Mam pytanko, jak zaanimować którąś z kresek, bo to jest ikonka menu "hamburger", na yt oglądałem film to tam gość miał różne znaczniki odpowiadające za jakąś część obrazu. Da się wgl w tym przypadku tak zrobić?

Answer 1

Cześć,

zajrzyj tutaj: Simple and Accessible SVG Menu Hamburger Animation

Ogólnie, każda z kresek hamburgera powinna być osobnym elementem <path> z własnym id (kreska-1, kreska-2, kreska-3). Wtedy w CSS możesz bawić się animowaniem poszczególnych kresek