{"id":391,"date":"2022-05-24T07:19:46","date_gmt":"2022-05-24T07:19:46","guid":{"rendered":"https:\/\/webdevs.blog\/pl\/?p=391"},"modified":"2026-02-20T07:28:18","modified_gmt":"2026-02-20T07:28:18","slug":"tworzenie-animowanych-plikow-svg","status":"publish","type":"post","link":"https:\/\/webdevs.blog\/pl\/tworzenie-animowanych-plikow-svg\/","title":{"rendered":"Wykorzystanie elementu animate do tworzenia animowanych plik\u00f3w SVG"},"content":{"rendered":"\n

Animacje ju\u017c dawno temu sta\u0142y si\u0119 sta\u0142ym elementem stron internetowych, mo\u017cemy wykonywa\u0107 je na wiele sposob\u00f3w w zale\u017cno\u015bci od typu elementu oraz poziomu skomplikowania samej animacji.<\/strong><\/p>\n\n\n\n

Dzisiaj chcia\u0142bym pokaza\u0107 w jaki spos\u00f3b mo\u017cemy doda\u0107 animacje do plik\u00f3w SVG. Jak pewnie wiesz, ten typ plik\u00f3w obs\u0142uguje animacje CSS i mo\u017cemy je wprowadzi\u0107 zar\u00f3wno w samym pliku SVG jak i w zewn\u0119trznym pliku CSS bazuj\u0105c np. na id<\/code> lub class<\/code> pliku lub tag\u00f3w, kt\u00f3re s\u0105 w nim zawarte.<\/p>\n\n\n\n

W sytuacji gdy musimy wprowadzi\u0107 animacj\u0119 kszta\u0142tu danego elementu animacje CSS mog\u0105 by\u0107 niewystarczaj\u0105ce. W takim przypadku z pomoc\u0105 przychodzi nam element <animate><\/code>, kt\u00f3ry pozwala dowolnie animowa\u0107<\/a> elementy tagu SVG.<\/p>\n\n\n\n

Jak si\u0119 do tego zabra\u0107?<\/h3>\n\n\n\n

W pierwszej kolejno\u015bci potrzebujemy przygotowa\u0107 dwie wersje pliku SVG. Pierwsza wersja powinna zawiera\u0107 bazowy stan, druga za\u015b stan, kt\u00f3ry chcemy osi\u0105gn\u0105\u0107 przez animacje. Na potrzeby tego artyku\u0142u przygotowa\u0142em ikon\u0119, kt\u00f3ra prezentuje si\u0119 nast\u0119puj\u0105co:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Na bazie tej ikony przygotowa\u0142em drugi plik SVG, kt\u00f3ry prezentuje stan jaki chcemy osi\u0105gn\u0105\u0107 na ko\u0144cu animacji.<\/p>\n\n\n\n

<?xml version=\"1.0\" encoding=\"utf-8\"?><\/span>\n<!-- Generator: Adobe Illustrator 26.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --><\/span>\n<svg<\/span> version<\/span>=\"1.1\"<\/span> id<\/span>=\"Warstwa_1\"<\/span> xmlns<\/span>=\"http:\/\/www.w3.org\/2000\/svg\"<\/span> xmlns:xlink<\/span>=\"http:\/\/www.w3.org\/1999\/xlink\"<\/span> x<\/span>=\"0px\"<\/span> y<\/span>=\"0px\"<\/span>\n   viewBox<\/span>=\"0 0 300 300\"<\/span> style<\/span>=\"enable-background:new 0 0 300 300;\"<\/span> xml:space<\/span>=\"preserve\"<\/span>><\/span>\n  <path<\/span> id<\/span>=\"border\"<\/span> d<\/span>=\"M260.8,257.9H39.2c-9.1,0-16.5-7.4-16.5-16.5V58.6c0-9.1,7.4-16.5,16.5-16.5h20.3c2.5,0,4.5,2,4.5,4.5\n    s-2,4.5-4.5,4.5H39.2c-4.1,0-7.5,3.4-7.5,7.5v182.9c0,4.1,3.4,7.5,7.5,7.5h221.5c4.1,0,7.5-3.4,7.5-7.5V58.6c0-4.1-3.4-7.5-7.5-7.5\n    H150c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h110.8c9.1,0,16.5,7.4,16.5,16.5v182.9C277.3,250.5,269.9,257.9,260.8,257.9z\"<\/span>\/><\/span>\n\n  <path<\/span> id<\/span>=\"border-top-line\"<\/span> d<\/span>=\"M128.7,51.1H78.3c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h50.4c2.5,0,4.5,2,4.5,4.5S131.2,51.1,128.7,51.1\n    z\"<\/span>\/><\/span>\n\n  <path<\/span> id<\/span>=\"sun-line-left-top\"<\/span> d<\/span>=\"M188.1,105.5c-1.2,0-2.3-0.4-3.2-1.3l-16.4-16.4c-1.8-1.8-1.8-4.6,0-6.4c1.8-1.8,4.6-1.8,6.4,0\n    l16.4,16.4c1.8,1.8,1.8,4.6,0,6.4C190.4,105.1,189.2,105.5,188.1,105.5z\"<\/span>\/><\/span>\n\n  <path<\/span> id<\/span>=\"sun-line-right-bottom\"<\/span> d<\/span>=\"M235.5,153c-1.2,0-2.3-0.4-3.2-1.3l-16.4-16.4c-1.8-1.8-1.8-4.6,0-6.4c1.8-1.8,4.6-1.8,6.4,0\n    l16.4,16.4c1.8,1.8,1.8,4.6,0,6.4C237.8,152.5,236.6,153,235.5,153z\"<\/span>\/><\/span>\n\n  <path<\/span> id<\/span>=\"sun-line-left-bottom\"<\/span> d<\/span>=\"M171.8,152.9c-1.2,0-2.3-0.4-3.2-1.3c-1.8-1.8-1.8-4.6,0-6.4l16.4-16.4c1.8-1.8,4.6-1.8,6.4,0\n    c1.8,1.8,1.8,4.6,0,6.4l-16.4,16.4C174.1,152.5,172.9,152.9,171.8,152.9z\"<\/span>\/><\/span>\n\n  <path<\/span> id<\/span>=\"sun-line-right-top\"<\/span> d<\/span>=\"M219.1,105.6c-1.2,0-2.3-0.4-3.2-1.3c-1.8-1.8-1.8-4.6,0-6.4l16.4-16.4c1.8-1.8,4.6-1.8,6.4,0\n    c1.8,1.8,1.8,4.6,0,6.4l-16.4,16.4C221.4,105.2,220.2,105.6,219.1,105.6z\"<\/span>\/><\/span>\n\n  <path<\/span> d<\/span>=\"M203.6,143c-14.6,0-26.5-11.9-26.5-26.5c0-14.6,11.9-26.5,26.5-26.5c14.6,0,26.5,11.9,26.5,26.5\n    C230.1,131.2,218.2,143,203.6,143z M203.6,99.1c-9.6,0-17.5,7.8-17.5,17.5c0,9.6,7.8,17.5,17.5,17.5c9.6,0,17.5-7.8,17.5-17.5\n    C221.1,106.9,213.2,99.1,203.6,99.1z\"<\/span>\/><\/span>\n\n  <path<\/span> id<\/span>=\"sun-line-right\"<\/span> d<\/span>=\"M237.1,121.1h-11.7c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h11.7c2.5,0,4.5,2,4.5,4.5\n    S239.6,121.1,237.1,121.1z\"<\/span>\/><\/span>\n\n  <path<\/span> id<\/span>=\"sun-line-top\"<\/span> d<\/span>=\"M203.6,99.2c-2.5,0-4.5-2-4.5-4.5V83c0-2.5,2-4.5,4.5-4.5s4.5,2,4.5,4.5v11.7\n    C208.1,97.2,206.1,99.2,203.6,99.2z\"<\/span>\/><\/span>\n\n  <path<\/span> id<\/span>=\"sun-line-left\"<\/span> d<\/span>=\"M181.7,121.1H170c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h11.7c2.5,0,4.5,2,4.5,4.5S184.2,121.1,181.7,121.1\n    z\"<\/span>\/><\/span>\n\n  <path<\/span> id<\/span>=\"sun-line-bottom\"<\/span> d<\/span>=\"M203.6,154.6c-2.5,0-4.5-2-4.5-4.5v-11.7c0-2.5,2-4.5,4.5-4.5s4.5,2,4.5,4.5v11.7\n    C208.1,152.6,206.1,154.6,203.6,154.6z\"<\/span>\/><\/span>\n    \n  <path<\/span> id<\/span>=\"mountains\"<\/span> d<\/span>=\"M272.9,246.2l-57.6-57.6c-1.4-1.4-3.7-1.7-5.4-0.7l-42,24.3L59.8,77.3c-0.9-1.1-2.1-1.7-3.5-1.7c0,0,0,0,0,0\n    c-1.4,0-2.7,0.6-3.5,1.7l-29,36.4c-1.5,1.9-1.2,4.8,0.7,6.3c1.9,1.5,4.8,1.2,6.3-0.7l25.5-32l54.5,68l-37.1-9.6\n    c-1.4-0.4-2.9,0-4,0.9l-13.3,11.1l-13.2-11.5c-1.4-1.2-3.5-1.5-5.1-0.6l-12.9,7.2c-2.2,1.2-3,3.9-1.8,6.1c1.2,2.2,3.9,3,6.1,1.8\n    l10.2-5.6l13.7,12c0.8,0.7,1.9,1.1,3,1.1c1,0,2-0.3,2.9-1L73.6,155l46.5,12l43.1,53.8c1.4,1.7,3.8,2.2,5.8,1.1l42.3-24.5l55.2,55.2\n    c0.9,0.9,2,1.3,3.2,1.3s2.3-0.4,3.2-1.3C274.6,250.8,274.6,248,272.9,246.2z\"<\/span>\/><\/span>\n<\/svg<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
W tym momencie mo\u017cemy przej\u015b\u0107 do u\u017cycia elementu <animate><\/code> – element ten dodajemy wewn\u0105trz elementu, kt\u00f3ry chcemy animowa\u0107, w naszym wypadku b\u0119d\u0105 to elementy path<\/code>, czyli \u015bcie\u017cki.<\/p>\n\n\n\n
Aby by\u0142o pro\u015bciej na pocz\u0105tek poka\u017c\u0119 jak doda\u0107 animacj\u0119 dla pojedynczej \u015bcie\u017cki, we\u017amy na pierwszy ogie\u0144 path<\/code> z ID border-top-line<\/code> – jest to linia, kt\u00f3ra znajduje si\u0119 w g\u00f3rnej cz\u0119\u015bci obrysu naszej ikony. Kod odpowiedzialny za ni\u0105 prezentuje si\u0119 tak:<\/p>\n\n\n
<path<\/span> id<\/span>=\"border-top-line\"<\/span> d<\/span>=\"M128.7,51.1H78.3c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h50.4c2.5,0,4.5,2,4.5,4.5S131.2,51.1,128.7,51.1\n    z\"<\/span>\/><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
W pierwszej kolejno\u015bci musimy zmieni\u0107 spos\u00f3b zamkni\u0119cia tagu path<\/code> w zwi\u0105zku z tym usuwamy \/<\/code> z ko\u0144ca tagu i dodajemy <\/path><\/code>, teraz mi\u0119dzy otwarciem i zamkni\u0119ciem tagu mamy miejsce na tworzenie animacji, dodajemy wi\u0119c w te miejsce poni\u017cszy kod:<\/p>\n\n\n
<animate<\/span> class<\/span>=\"animate\"<\/span> dur<\/span>=\"3.5s\"<\/span> repeatCount<\/span>=\"indefinite\"<\/span> attributeName<\/span>=\"d\"<\/span> \nvalues<\/span>=\"warto\u015b\u0107-pocz\u0105tkowa-atrybutu-d;\nwarto\u015b\u0107-ko\u0144cowa-atrybutu-d;\nwarto\u015b\u0107-pocz\u0105tkowa-atrybutu-d;\"<\/span>\nfill<\/span>=\"freeze\"<\/span>\ncalcMode<\/span>=\"linear\"<\/span>\n\/><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
W omawianym przypadku chc\u0119 by animacja wykonywa\u0142a si\u0119 ca\u0142y czas, dlatego parametr repeatCount<\/code> ustawiony jest na indefinite<\/code>. Parametr values<\/code> zawiera\u0107 b\u0119dzie 3 warto\u015bci oddzielone \u015brednikiem – warto\u015b\u0107 pocz\u0105tkow\u0105, warto\u015b\u0107 ko\u0144cow\u0105 i ponownie warto\u015b\u0107 pocz\u0105tkow\u0105, tak by animacja wykonywa\u0142a si\u0119 p\u0142ynnie mi\u0119dzy pocz\u0105tkiem i ko\u0144cem, gdyby\u015bmy zostawili tylko warto\u015b\u0107 pocz\u0105tkow\u0105 i ko\u0144cow\u0105, to po doj\u015bciu do warto\u015bci ko\u0144cowej uzyskamy nag\u0142y przeskok do stanu pocz\u0105tkowego, zamiast p\u0142ynnego przej\u015bcia.<\/p>\n\n\n\n
Teraz na podstawie powy\u017cszej bazy elementu <animate><\/code> przygotujmy now\u0105 wersj\u0119 elementu <path><\/code> zawieraj\u0105cego animacj\u0119:<\/p>\n\n\n
<path<\/span> id<\/span>=\"border-top-line\"<\/span> d<\/span>=\"M128.7,51.1H78.3c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h50.4c2.5,0,4.5,2,4.5,4.5S131.2,51.1,128.7,51.1\nz\"<\/span>><\/span>\n    <animate<\/span> class<\/span>=\"animate\"<\/span> dur<\/span>=\"3.5s\"<\/span> repeatCount<\/span>=\"indefinite\"<\/span> attributeName<\/span>=\"d\"<\/span> \nvalues<\/span>=\"M128.7,51.1H78.3c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h50.4c2.5,0,4.5,2,4.5,4.5S131.2,51.1,128.7,51.1\nz;\nM88.7,51.1H78.3c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h10.4c2.5,0,4.5,2,4.5,4.5S91.2,51.1,88.7,51.1z; M128.7,51.1H78.3c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h50.4c2.5,0,4.5,2,4.5,4.5S131.2,51.1,128.7,51.1\nz;\"<\/span>\nfill<\/span>=\"freeze\"<\/span>\ncalcMode<\/span>=\"linear\"<\/span>\n\/><\/span>\n<\/path<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Warto\u015b\u0107, kt\u00f3r\u0105 nazwali\u015bmy wcze\u015bniej warto\u015b\u0107-pocz\u0105tkowa-atrybutu-d<\/code> pobieramy z atrybutu d<\/code> elementu path<\/code> w podstawowej wersji, po prostu wklejamy j\u0105 w dwa miejsca. Warto\u015b\u0107 warto\u015b\u0107-ko\u0144cowa-atrybutu-d<\/code> kopiujemy z atrybutu d<\/code> \u015bcie\u017cki z ID border-top-line<\/code> z drugiego pliku SVG, kt\u00f3ry zawiera ko\u0144cowy stan animacji.<\/p>\n\n\n\n
Dzi\u0119ki temu uzyskali\u015bmy animacje pierwszego elementu i prezentuje si\u0119 ona nast\u0119puj\u0105co:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Jak pewnie zauwa\u017cy\u0142e\u015b element animate<\/code> zawiera kilka atrybut\u00f3w, pe\u0142n\u0105 ich list\u0119 oraz dost\u0119pne warto\u015bci mo\u017cesz znale\u017a\u0107 np. tutaj<\/a>. W omawianym przypadku ustawili\u015bmy czas animacji (atrybut dur<\/code>) na 3.5 sekundy (jest to czas ca\u0142ej animacji, od pocz\u0105tku do ko\u0144ca i zn\u00f3w do pocz\u0105tku), wspomniany ju\u017c atrybut repeatCount<\/code> na nieokre\u015blony, co powoduje niesko\u0144czone wykonywanie si\u0119 animacji, atrybut attributeName<\/code> okre\u015bla jaki atrybut elementu path<\/code> chcemy animowa\u0107, jest to atrybut d<\/code>, fill<\/code> definiuje finalny stan animacji, w naszym przypadku warto\u015b\u0107 freeze<\/code> zachowuje stan ostatniej klatki animacji. Ostatni atrybut calcMode<\/code> okre\u015bla tryb interpolacji animacji i jest ustawiony na domy\u015bln\u0105 warto\u015b\u0107.<\/p>\n\n\n\n
Wiemy ju\u017c jak doda\u0107 animacj\u0119 do poszczeg\u00f3lnej \u015bcie\u017cki, poni\u017cej znajdziesz finaln\u0105 wersj\u0119 pliku SVG zawieraj\u0105cego animacje dodane do wszystkich \u015bcie\u017cek, kt\u00f3re chcieli\u015bmy animowa\u0107:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
A tak prezentuje si\u0119 finalny kod SVG:<\/p>\n\n\n
<?xml version=\"1.0\" encoding=\"utf-8\"?><\/span>\n<!-- Generator: Adobe Illustrator 26.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --><\/span>\n<svg<\/span> version<\/span>=\"1.1\"<\/span> id<\/span>=\"Warstwa_1\"<\/span> xmlns<\/span>=\"http:\/\/www.w3.org\/2000\/svg\"<\/span> xmlns:xlink<\/span>=\"http:\/\/www.w3.org\/1999\/xlink\"<\/span> x<\/span>=\"0px\"<\/span> y<\/span>=\"0px\"<\/span>\n\t viewBox<\/span>=\"0 0 300 300\"<\/span> style<\/span>=\"enable-background:new 0 0 300 300;\"<\/span> xml:space<\/span>=\"preserve\"<\/span>><\/span>\n<path<\/span> id<\/span>=\"border\"<\/span> d<\/span>=\"M260.8,257.9H39.2c-9.1,0-16.5-7.4-16.5-16.5V58.6c0-9.1,7.4-16.5,16.5-16.5h20.3c2.5,0,4.5,2,4.5,4.5\n\t\ts-2,4.5-4.5,4.5H39.2c-4.1,0-7.5,3.4-7.5,7.5v182.9c0,4.1,3.4,7.5,7.5,7.5h221.5c4.1,0,7.5-3.4,7.5-7.5V58.6c0-4.1-3.4-7.5-7.5-7.5\n\t\tH150c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h110.8c9.1,0,16.5,7.4,16.5,16.5v182.9C277.3,250.5,269.9,257.9,260.8,257.9z\"<\/span>><\/span>\n    <animate<\/span> class<\/span>=\"animate\"<\/span> dur<\/span>=\"3.5s\"<\/span> repeatCount<\/span>=\"indefinite\"<\/span> attributeName<\/span>=\"d\"<\/span> \n    values<\/span>=\"M260.8,257.9H39.2c-9.1,0-16.5-7.4-16.5-16.5V58.6c0-9.1,7.4-16.5,16.5-16.5h20.3c2.5,0,4.5,2,4.5,4.5\n\t\ts-2,4.5-4.5,4.5H39.2c-4.1,0-7.5,3.4-7.5,7.5v182.9c0,4.1,3.4,7.5,7.5,7.5h221.5c4.1,0,7.5-3.4,7.5-7.5V58.6c0-4.1-3.4-7.5-7.5-7.5\n\t\tH150c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h110.8c9.1,0,16.5,7.4,16.5,16.5v182.9C277.3,250.5,269.9,257.9,260.8,257.9z;\n    M260.8,257.9H39.2c-9.1,0-16.5-7.4-16.5-16.5V58.6c0-9.1,7.4-16.5,16.5-16.5h20.3c2.5,0,4.5,2,4.5,4.5\n    s-2,4.5-4.5,4.5H39.2c-4.1,0-7.5,3.4-7.5,7.5v182.9c0,4.1,3.4,7.5,7.5,7.5h221.5c4.1,0,7.5-3.4,7.5-7.5V58.6c0-4.1-3.4-7.5-7.5-7.5\n    H110c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h150.8c9.1,0,16.5,7.4,16.5,16.5v182.9C277.3,250.5,269.9,257.9,260.8,257.9z;\n    M260.8,257.9H39.2c-9.1,0-16.5-7.4-16.5-16.5V58.6c0-9.1,7.4-16.5,16.5-16.5h20.3c2.5,0,4.5,2,4.5,4.5\n\t\ts-2,4.5-4.5,4.5H39.2c-4.1,0-7.5,3.4-7.5,7.5v182.9c0,4.1,3.4,7.5,7.5,7.5h221.5c4.1,0,7.5-3.4,7.5-7.5V58.6c0-4.1-3.4-7.5-7.5-7.5\n\t\tH150c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h110.8c9.1,0,16.5,7.4,16.5,16.5v182.9C277.3,250.5,269.9,257.9,260.8,257.9z;\"<\/span>\n    fill<\/span>=\"freeze\"<\/span>\n    calcMode<\/span>=\"linear\"<\/span>\n    \/><\/span>\n<\/path<\/span>><\/span>\n\n<path<\/span> id<\/span>=\"border-top-line\"<\/span> d<\/span>=\"M128.7,51.1H78.3c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h50.4c2.5,0,4.5,2,4.5,4.5S131.2,51.1,128.7,51.1\n\t\tz\"<\/span>><\/span>\n    <animate<\/span> class<\/span>=\"animate\"<\/span> dur<\/span>=\"3.5s\"<\/span> repeatCount<\/span>=\"indefinite\"<\/span> attributeName<\/span>=\"d\"<\/span> \n    values<\/span>=\"M128.7,51.1H78.3c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h50.4c2.5,0,4.5,2,4.5,4.5S131.2,51.1,128.7,51.1\n\t\tz;\n    M88.7,51.1H78.3c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h10.4c2.5,0,4.5,2,4.5,4.5S91.2,51.1,88.7,51.1z;\n    M128.7,51.1H78.3c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h50.4c2.5,0,4.5,2,4.5,4.5S131.2,51.1,128.7,51.1\n\t\tz;\"<\/span>\n    fill<\/span>=\"freeze\"<\/span>\n    calcMode<\/span>=\"linear\"<\/span>\n    \/><\/span>\n<\/path<\/span>><\/span>\n\n<path<\/span> id<\/span>=\"sun-line-left-top\"<\/span> d<\/span>=\"M188.1,105.5c-1.2,0-2.3-0.4-3.2-1.3l-16.4-16.4c-1.8-1.8-1.8-4.6,0-6.4c1.8-1.8,4.6-1.8,6.4,0\n\t\tl16.4,16.4c1.8,1.8,1.8,4.6,0,6.4C190.4,105.1,189.2,105.5,188.1,105.5z\"<\/span>><\/span>\n<\/path<\/span>><\/span>\n\n<path<\/span> id<\/span>=\"sun-line-right-bottom\"<\/span> d<\/span>=\"M235.5,153c-1.2,0-2.3-0.4-3.2-1.3l-16.4-16.4c-1.8-1.8-1.8-4.6,0-6.4c1.8-1.8,4.6-1.8,6.4,0\n\t\tl16.4,16.4c1.8,1.8,1.8,4.6,0,6.4C237.8,152.5,236.6,153,235.5,153z\"<\/span>\/><\/span>\n\n<path<\/span> id<\/span>=\"sun-line-left-bottom\"<\/span> d<\/span>=\"M171.8,152.9c-1.2,0-2.3-0.4-3.2-1.3c-1.8-1.8-1.8-4.6,0-6.4l16.4-16.4c1.8-1.8,4.6-1.8,6.4,0\n\t\tc1.8,1.8,1.8,4.6,0,6.4l-16.4,16.4C174.1,152.5,172.9,152.9,171.8,152.9z\"<\/span>\/><\/span>\n\n<path<\/span> id<\/span>=\"sun-line-right-top\"<\/span> d<\/span>=\"M219.1,105.6c-1.2,0-2.3-0.4-3.2-1.3c-1.8-1.8-1.8-4.6,0-6.4l16.4-16.4c1.8-1.8,4.6-1.8,6.4,0\n\t\tc1.8,1.8,1.8,4.6,0,6.4l-16.4,16.4C221.4,105.2,220.2,105.6,219.1,105.6z\"<\/span>\/><\/span>\n\n<path<\/span> d<\/span>=\"M203.6,143c-14.6,0-26.5-11.9-26.5-26.5c0-14.6,11.9-26.5,26.5-26.5c14.6,0,26.5,11.9,26.5,26.5\n\t\tC230.1,131.2,218.2,143,203.6,143z M203.6,99.1c-9.6,0-17.5,7.8-17.5,17.5c0,9.6,7.8,17.5,17.5,17.5c9.6,0,17.5-7.8,17.5-17.5\n\t\tC221.1,106.9,213.2,99.1,203.6,99.1z\"<\/span>\/><\/span>\n\n<path<\/span> id<\/span>=\"sun-line-right\"<\/span> d<\/span>=\"M237.1,121.1h-11.7c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h11.7c2.5,0,4.5,2,4.5,4.5\n\t\tS239.6,121.1,237.1,121.1z\"<\/span>><\/span>\n    <animate<\/span> class<\/span>=\"animate\"<\/span> dur<\/span>=\"3.5s\"<\/span> repeatCount<\/span>=\"indefinite\"<\/span> attributeName<\/span>=\"d\"<\/span> \n    values<\/span>=\"M237.1,121.1h-11.7c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h11.7c2.5,0,4.5,2,4.5,4.5\n\t\tS239.6,121.1,237.1,121.1z;\n    M247.1,121.1h-21.7c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h21.7c2.5,0,4.5,2,4.5,4.5\n\t  S249.6,121.1,247.1,121.1z;\n    M237.1,121.1h-11.7c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h11.7c2.5,0,4.5,2,4.5,4.5\n\t\tS239.6,121.1,237.1,121.1z\"<\/span>\n    fill<\/span>=\"freeze\"<\/span>\n    calcMode<\/span>=\"linear\"<\/span>\n    \/><\/span>\n<\/path<\/span>><\/span>\n\n<path<\/span> id<\/span>=\"sun-line-top\"<\/span> d<\/span>=\"M203.6,99.2c-2.5,0-4.5-2-4.5-4.5V83c0-2.5,2-4.5,4.5-4.5s4.5,2,4.5,4.5v11.7\n\t\tC208.1,97.2,206.1,99.2,203.6,99.2z\"<\/span>><\/span>\n    <animate<\/span> class<\/span>=\"animate\"<\/span> dur<\/span>=\"3.5s\"<\/span> repeatCount<\/span>=\"indefinite\"<\/span> attributeName<\/span>=\"d\"<\/span> \n    values<\/span>=\"M203.6,99.2c-2.5,0-4.5-2-4.5-4.5V83c0-2.5,2-4.5,4.5-4.5s4.5,2,4.5,4.5v11.7\n\t\tC208.1,97.2,206.1,99.2,203.6,99.2z;\n    M203.6,99.2c-2.5,0-4.5-2-4.5-4.5V73c0-2.5,2-4.5,4.5-4.5s4.5,2,4.5,4.5v21.7\n\t  C208.1,97.2,206.1,99.2,203.6,99.2z;\n    M203.6,99.2c-2.5,0-4.5-2-4.5-4.5V83c0-2.5,2-4.5,4.5-4.5s4.5,2,4.5,4.5v11.7\n\t\tC208.1,97.2,206.1,99.2,203.6,99.2z;\"<\/span>\n    fill<\/span>=\"freeze\"<\/span>\n    calcMode<\/span>=\"linear\"<\/span>\n    \/><\/span>\n<\/path<\/span>><\/span>\n\n<path<\/span> id<\/span>=\"sun-line-left\"<\/span> d<\/span>=\"M181.7,121.1H170c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h11.7c2.5,0,4.5,2,4.5,4.5S184.2,121.1,181.7,121.1\n\t\tz\"<\/span>><\/span>\n    <animate<\/span> class<\/span>=\"animate\"<\/span> dur<\/span>=\"3.5s\"<\/span> repeatCount<\/span>=\"indefinite\"<\/span> attributeName<\/span>=\"d\"<\/span> \n    values<\/span>=\"M181.7,121.1H170c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h11.7c2.5,0,4.5,2,4.5,4.5S184.2,121.1,181.7,121.1\n\t\tz;\n    M181.7,121.1H160c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h21.7c2.5,0,4.5,2,4.5,4.5S184.2,121.1,181.7,121.1\n\t  z;\n    M181.7,121.1H170c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h11.7c2.5,0,4.5,2,4.5,4.5S184.2,121.1,181.7,121.1\n\t\tz\"<\/span>\n    fill<\/span>=\"freeze\"<\/span>\n    calcMode<\/span>=\"linear\"<\/span>\n    \/><\/span>\n<\/path<\/span>><\/span>\n\n<path<\/span> id<\/span>=\"sun-line-bottom\"<\/span> d<\/span>=\"M203.6,154.6c-2.5,0-4.5-2-4.5-4.5v-11.7c0-2.5,2-4.5,4.5-4.5s4.5,2,4.5,4.5v11.7\n\t\tC208.1,152.6,206.1,154.6,203.6,154.6z\"<\/span>><\/span>\n    <animate<\/span> class<\/span>=\"animate\"<\/span> dur<\/span>=\"3.5s\"<\/span> repeatCount<\/span>=\"indefinite\"<\/span> attributeName<\/span>=\"d\"<\/span> \n    values<\/span>=\"M203.6,154.6c-2.5,0-4.5-2-4.5-4.5v-11.7c0-2.5,2-4.5,4.5-4.5s4.5,2,4.5,4.5v11.7\n\t\tC208.1,152.6,206.1,154.6,203.6,154.6z;\n    M203.6,164.6c-2.5,0-4.5-2-4.5-4.5v-21.7c0-2.5,2-4.5,4.5-4.5s4.5,2,4.5,4.5v21.7\n\t  C208.1,162.6,206.1,164.6,203.6,164.6z;\n    M203.6,154.6c-2.5,0-4.5-2-4.5-4.5v-11.7c0-2.5,2-4.5,4.5-4.5s4.5,2,4.5,4.5v11.7\n\t\tC208.1,152.6,206.1,154.6,203.6,154.6z\"<\/span>\n    fill<\/span>=\"freeze\"<\/span>\n    calcMode<\/span>=\"linear\"<\/span>\n    \/><\/span>\n<\/path<\/span>><\/span>\n\t\t\n<path<\/span> id<\/span>=\"mountains\"<\/span> d<\/span>=\"M272.9,246.2l-57.6-57.6c-1.4-1.4-3.7-1.7-5.4-0.7l-42,24.3L59.8,77.3c-0.9-1.1-2.1-1.7-3.5-1.7c0,0,0,0,0,0\n\t\tc-1.4,0-2.7,0.6-3.5,1.7l-29,36.4c-1.5,1.9-1.2,4.8,0.7,6.3c1.9,1.5,4.8,1.2,6.3-0.7l25.5-32l54.5,68l-37.1-9.6\n\t\tc-1.4-0.4-2.9,0-4,0.9l-13.3,11.1l-13.2-11.5c-1.4-1.2-3.5-1.5-5.1-0.6l-12.9,7.2c-2.2,1.2-3,3.9-1.8,6.1c1.2,2.2,3.9,3,6.1,1.8\n\t\tl10.2-5.6l13.7,12c0.8,0.7,1.9,1.1,3,1.1c1,0,2-0.3,2.9-1L73.6,155l46.5,12l43.1,53.8c1.4,1.7,3.8,2.2,5.8,1.1l42.3-24.5l55.2,55.2\n\t\tc0.9,0.9,2,1.3,3.2,1.3s2.3-0.4,3.2-1.3C274.6,250.8,274.6,248,272.9,246.2z\"<\/span>\/><\/span>\n<\/svg<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Uruchomienie animacji po akcji u\u017cytkownika<\/h3>\n\n\n\n
W powy\u017cszym przyk\u0142adzie animacja wykonuje si\u0119 od razu i w niesko\u0144czonej p\u0119tli, jednak cz\u0119sto b\u0119dziemy potrzebowali uruchomi\u0107 j\u0105 raz, po konkretnym dzia\u0142aniu u\u017cytkownika, np. gdy przescrolluje do danej sekcji, kliknie w dany element czy na hover samego pliku SVG. Oczywi\u015bcie element <animate><\/code> pozwala nam na uzyskanie takiego efektu, jednak b\u0119dziemy musieli delikatnie przerobi\u0107 nasz plik SVG oraz doda\u0107 kilka linijek JS, odpowiedzialnych za uruchomienie animacji na po\u017c\u0105dane dzia\u0142anie.<\/p>\n\n\n\n
Na pocz\u0105tku przygotujmy nasz plik SVG , w ka\u017cdym z tag\u00f3w animate musimy zmieni\u0107 warto\u015b\u0107 atrybutu repeatCount<\/code> na 1<\/code> – poniewa\u017c chcemy by animacja wykona\u0142a si\u0119 raz, po okre\u015blonej akcji u\u017cytkownika. Dodatkowo do ka\u017cdego elementu <animate><\/code> musimy doda\u0107 dodatkowy atrybut begin<\/code> z warto\u015bci\u0105 indefinite<\/code>, co spowoduje, \u017ce animacja nie zostanie uruchomiona automatycznie. Tak prezentuje si\u0119 finalny kod pliku SVG, kt\u00f3ry b\u0119dzie animowany po okre\u015blonej akcji u\u017cytkownika:<\/p>\n\n\n
<?xml version=\"1.0\" encoding=\"utf-8\"?><\/span>\n<!-- Generator: Adobe Illustrator 26.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --><\/span>\n<svg<\/span> version<\/span>=\"1.1\"<\/span> id<\/span>=\"Warstwa_1\"<\/span> xmlns<\/span>=\"http:\/\/www.w3.org\/2000\/svg\"<\/span> xmlns:xlink<\/span>=\"http:\/\/www.w3.org\/1999\/xlink\"<\/span> x<\/span>=\"0px\"<\/span> y<\/span>=\"0px\"<\/span>\n\t viewBox<\/span>=\"0 0 300 300\"<\/span> style<\/span>=\"enable-background:new 0 0 300 300;\"<\/span> xml:space<\/span>=\"preserve\"<\/span>><\/span>\n<path<\/span> id<\/span>=\"border\"<\/span> d<\/span>=\"M260.8,257.9H39.2c-9.1,0-16.5-7.4-16.5-16.5V58.6c0-9.1,7.4-16.5,16.5-16.5h20.3c2.5,0,4.5,2,4.5,4.5\n\t\ts-2,4.5-4.5,4.5H39.2c-4.1,0-7.5,3.4-7.5,7.5v182.9c0,4.1,3.4,7.5,7.5,7.5h221.5c4.1,0,7.5-3.4,7.5-7.5V58.6c0-4.1-3.4-7.5-7.5-7.5\n\t\tH150c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h110.8c9.1,0,16.5,7.4,16.5,16.5v182.9C277.3,250.5,269.9,257.9,260.8,257.9z\"<\/span>><\/span>\n    <animate<\/span> class<\/span>=\"animate\"<\/span> dur<\/span>=\"3.5s\"<\/span> repeatCount<\/span>=\"1\"<\/span> attributeName<\/span>=\"d\"<\/span> \n    values<\/span>=\"M260.8,257.9H39.2c-9.1,0-16.5-7.4-16.5-16.5V58.6c0-9.1,7.4-16.5,16.5-16.5h20.3c2.5,0,4.5,2,4.5,4.5\n\t\ts-2,4.5-4.5,4.5H39.2c-4.1,0-7.5,3.4-7.5,7.5v182.9c0,4.1,3.4,7.5,7.5,7.5h221.5c4.1,0,7.5-3.4,7.5-7.5V58.6c0-4.1-3.4-7.5-7.5-7.5\n\t\tH150c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h110.8c9.1,0,16.5,7.4,16.5,16.5v182.9C277.3,250.5,269.9,257.9,260.8,257.9z;\n    M260.8,257.9H39.2c-9.1,0-16.5-7.4-16.5-16.5V58.6c0-9.1,7.4-16.5,16.5-16.5h20.3c2.5,0,4.5,2,4.5,4.5\n    s-2,4.5-4.5,4.5H39.2c-4.1,0-7.5,3.4-7.5,7.5v182.9c0,4.1,3.4,7.5,7.5,7.5h221.5c4.1,0,7.5-3.4,7.5-7.5V58.6c0-4.1-3.4-7.5-7.5-7.5\n    H110c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h150.8c9.1,0,16.5,7.4,16.5,16.5v182.9C277.3,250.5,269.9,257.9,260.8,257.9z;\n    M260.8,257.9H39.2c-9.1,0-16.5-7.4-16.5-16.5V58.6c0-9.1,7.4-16.5,16.5-16.5h20.3c2.5,0,4.5,2,4.5,4.5\n\t\ts-2,4.5-4.5,4.5H39.2c-4.1,0-7.5,3.4-7.5,7.5v182.9c0,4.1,3.4,7.5,7.5,7.5h221.5c4.1,0,7.5-3.4,7.5-7.5V58.6c0-4.1-3.4-7.5-7.5-7.5\n\t\tH150c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h110.8c9.1,0,16.5,7.4,16.5,16.5v182.9C277.3,250.5,269.9,257.9,260.8,257.9z;\"<\/span>\n    fill<\/span>=\"freeze\"<\/span>\n    calcMode<\/span>=\"linear\"<\/span>\n    begin<\/span>=\"indefinite\"<\/span>\n    \/><\/span>\n<\/path<\/span>><\/span>\n\n<path<\/span> id<\/span>=\"border-top-line\"<\/span> d<\/span>=\"M128.7,51.1H78.3c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h50.4c2.5,0,4.5,2,4.5,4.5S131.2,51.1,128.7,51.1\n\t\tz\"<\/span>><\/span>\n    <animate<\/span> class<\/span>=\"animate\"<\/span> dur<\/span>=\"3.5s\"<\/span> repeatCount<\/span>=\"1\"<\/span> attributeName<\/span>=\"d\"<\/span> \n    values<\/span>=\"M128.7,51.1H78.3c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h50.4c2.5,0,4.5,2,4.5,4.5S131.2,51.1,128.7,51.1\n\t\tz;\n    M88.7,51.1H78.3c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h10.4c2.5,0,4.5,2,4.5,4.5S91.2,51.1,88.7,51.1z;\n    M128.7,51.1H78.3c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h50.4c2.5,0,4.5,2,4.5,4.5S131.2,51.1,128.7,51.1\n\t\tz;\"<\/span>\n    fill<\/span>=\"freeze\"<\/span>\n    calcMode<\/span>=\"linear\"<\/span>\n    begin<\/span>=\"indefinite\"<\/span>\n    \/><\/span>\n<\/path<\/span>><\/span>\n\n<path<\/span> id<\/span>=\"sun-line-left-top\"<\/span> d<\/span>=\"M188.1,105.5c-1.2,0-2.3-0.4-3.2-1.3l-16.4-16.4c-1.8-1.8-1.8-4.6,0-6.4c1.8-1.8,4.6-1.8,6.4,0\n\t\tl16.4,16.4c1.8,1.8,1.8,4.6,0,6.4C190.4,105.1,189.2,105.5,188.1,105.5z\"<\/span>><\/span>\n<\/path<\/span>><\/span>\n\n<path<\/span> id<\/span>=\"sun-line-right-bottom\"<\/span> d<\/span>=\"M235.5,153c-1.2,0-2.3-0.4-3.2-1.3l-16.4-16.4c-1.8-1.8-1.8-4.6,0-6.4c1.8-1.8,4.6-1.8,6.4,0\n\t\tl16.4,16.4c1.8,1.8,1.8,4.6,0,6.4C237.8,152.5,236.6,153,235.5,153z\"<\/span>\/><\/span>\n\n<path<\/span> id<\/span>=\"sun-line-left-bottom\"<\/span> d<\/span>=\"M171.8,152.9c-1.2,0-2.3-0.4-3.2-1.3c-1.8-1.8-1.8-4.6,0-6.4l16.4-16.4c1.8-1.8,4.6-1.8,6.4,0\n\t\tc1.8,1.8,1.8,4.6,0,6.4l-16.4,16.4C174.1,152.5,172.9,152.9,171.8,152.9z\"<\/span>\/><\/span>\n\n<path<\/span> id<\/span>=\"sun-line-right-top\"<\/span> d<\/span>=\"M219.1,105.6c-1.2,0-2.3-0.4-3.2-1.3c-1.8-1.8-1.8-4.6,0-6.4l16.4-16.4c1.8-1.8,4.6-1.8,6.4,0\n\t\tc1.8,1.8,1.8,4.6,0,6.4l-16.4,16.4C221.4,105.2,220.2,105.6,219.1,105.6z\"<\/span>\/><\/span>\n\n<path<\/span> d<\/span>=\"M203.6,143c-14.6,0-26.5-11.9-26.5-26.5c0-14.6,11.9-26.5,26.5-26.5c14.6,0,26.5,11.9,26.5,26.5\n\t\tC230.1,131.2,218.2,143,203.6,143z M203.6,99.1c-9.6,0-17.5,7.8-17.5,17.5c0,9.6,7.8,17.5,17.5,17.5c9.6,0,17.5-7.8,17.5-17.5\n\t\tC221.1,106.9,213.2,99.1,203.6,99.1z\"<\/span>\/><\/span>\n\n<path<\/span> id<\/span>=\"sun-line-right\"<\/span> d<\/span>=\"M237.1,121.1h-11.7c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h11.7c2.5,0,4.5,2,4.5,4.5\n\t\tS239.6,121.1,237.1,121.1z\"<\/span>><\/span>\n    <animate<\/span> class<\/span>=\"animate\"<\/span> dur<\/span>=\"3.5s\"<\/span> repeatCount<\/span>=\"1\"<\/span> attributeName<\/span>=\"d\"<\/span> \n    values<\/span>=\"M237.1,121.1h-11.7c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h11.7c2.5,0,4.5,2,4.5,4.5\n\t\tS239.6,121.1,237.1,121.1z;\n    M247.1,121.1h-21.7c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h21.7c2.5,0,4.5,2,4.5,4.5\n\t  S249.6,121.1,247.1,121.1z;\n    M237.1,121.1h-11.7c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h11.7c2.5,0,4.5,2,4.5,4.5\n\t\tS239.6,121.1,237.1,121.1z\"<\/span>\n    fill<\/span>=\"freeze\"<\/span>\n    calcMode<\/span>=\"linear\"<\/span>\n    begin<\/span>=\"indefinite\"<\/span>\n    \/><\/span>\n<\/path<\/span>><\/span>\n\n<path<\/span> id<\/span>=\"sun-line-top\"<\/span> d<\/span>=\"M203.6,99.2c-2.5,0-4.5-2-4.5-4.5V83c0-2.5,2-4.5,4.5-4.5s4.5,2,4.5,4.5v11.7\n\t\tC208.1,97.2,206.1,99.2,203.6,99.2z\"<\/span>><\/span>\n    <animate<\/span> class<\/span>=\"animate\"<\/span> dur<\/span>=\"3.5s\"<\/span> repeatCount<\/span>=\"1\"<\/span> attributeName<\/span>=\"d\"<\/span> \n    values<\/span>=\"M203.6,99.2c-2.5,0-4.5-2-4.5-4.5V83c0-2.5,2-4.5,4.5-4.5s4.5,2,4.5,4.5v11.7\n\t\tC208.1,97.2,206.1,99.2,203.6,99.2z;\n    M203.6,99.2c-2.5,0-4.5-2-4.5-4.5V73c0-2.5,2-4.5,4.5-4.5s4.5,2,4.5,4.5v21.7\n\t  C208.1,97.2,206.1,99.2,203.6,99.2z;\n    M203.6,99.2c-2.5,0-4.5-2-4.5-4.5V83c0-2.5,2-4.5,4.5-4.5s4.5,2,4.5,4.5v11.7\n\t\tC208.1,97.2,206.1,99.2,203.6,99.2z;\"<\/span>\n    fill<\/span>=\"freeze\"<\/span>\n    calcMode<\/span>=\"linear\"<\/span>\n    begin<\/span>=\"indefinite\"<\/span>\n    \/><\/span>\n<\/path<\/span>><\/span>\n\n<path<\/span> id<\/span>=\"sun-line-left\"<\/span> d<\/span>=\"M181.7,121.1H170c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h11.7c2.5,0,4.5,2,4.5,4.5S184.2,121.1,181.7,121.1\n\t\tz\"<\/span>><\/span>\n    <animate<\/span> class<\/span>=\"animate\"<\/span> dur<\/span>=\"3.5s\"<\/span> repeatCount<\/span>=\"1\"<\/span> attributeName<\/span>=\"d\"<\/span> \n    values<\/span>=\"M181.7,121.1H170c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h11.7c2.5,0,4.5,2,4.5,4.5S184.2,121.1,181.7,121.1\n\t\tz;\n    M181.7,121.1H160c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h21.7c2.5,0,4.5,2,4.5,4.5S184.2,121.1,181.7,121.1\n\t  z;\n    M181.7,121.1H170c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h11.7c2.5,0,4.5,2,4.5,4.5S184.2,121.1,181.7,121.1\n\t\tz\"<\/span>\n    fill<\/span>=\"freeze\"<\/span>\n    calcMode<\/span>=\"linear\"<\/span>\n    begin<\/span>=\"indefinite\"<\/span>\n    \/><\/span>\n<\/path<\/span>><\/span>\n\n<path<\/span> id<\/span>=\"sun-line-bottom\"<\/span> d<\/span>=\"M203.6,154.6c-2.5,0-4.5-2-4.5-4.5v-11.7c0-2.5,2-4.5,4.5-4.5s4.5,2,4.5,4.5v11.7\n\t\tC208.1,152.6,206.1,154.6,203.6,154.6z\"<\/span>><\/span>\n    <animate<\/span> class<\/span>=\"animate\"<\/span> dur<\/span>=\"3.5s\"<\/span> repeatCount<\/span>=\"1\"<\/span> attributeName<\/span>=\"d\"<\/span> \n    values<\/span>=\"M203.6,154.6c-2.5,0-4.5-2-4.5-4.5v-11.7c0-2.5,2-4.5,4.5-4.5s4.5,2,4.5,4.5v11.7\n\t\tC208.1,152.6,206.1,154.6,203.6,154.6z;\n    M203.6,164.6c-2.5,0-4.5-2-4.5-4.5v-21.7c0-2.5,2-4.5,4.5-4.5s4.5,2,4.5,4.5v21.7\n\t  C208.1,162.6,206.1,164.6,203.6,164.6z;\n    M203.6,154.6c-2.5,0-4.5-2-4.5-4.5v-11.7c0-2.5,2-4.5,4.5-4.5s4.5,2,4.5,4.5v11.7\n\t\tC208.1,152.6,206.1,154.6,203.6,154.6z\"<\/span>\n    fill<\/span>=\"freeze\"<\/span>\n    calcMode<\/span>=\"linear\"<\/span>\n    begin<\/span>=\"indefinite\"<\/span>\n    \/><\/span>\n<\/path<\/span>><\/span>\n\t\t\n<path<\/span> id<\/span>=\"mountains\"<\/span> d<\/span>=\"M272.9,246.2l-57.6-57.6c-1.4-1.4-3.7-1.7-5.4-0.7l-42,24.3L59.8,77.3c-0.9-1.1-2.1-1.7-3.5-1.7c0,0,0,0,0,0\n\t\tc-1.4,0-2.7,0.6-3.5,1.7l-29,36.4c-1.5,1.9-1.2,4.8,0.7,6.3c1.9,1.5,4.8,1.2,6.3-0.7l25.5-32l54.5,68l-37.1-9.6\n\t\tc-1.4-0.4-2.9,0-4,0.9l-13.3,11.1l-13.2-11.5c-1.4-1.2-3.5-1.5-5.1-0.6l-12.9,7.2c-2.2,1.2-3,3.9-1.8,6.1c1.2,2.2,3.9,3,6.1,1.8\n\t\tl10.2-5.6l13.7,12c0.8,0.7,1.9,1.1,3,1.1c1,0,2-0.3,2.9-1L73.6,155l46.5,12l43.1,53.8c1.4,1.7,3.8,2.2,5.8,1.1l42.3-24.5l55.2,55.2\n\t\tc0.9,0.9,2,1.3,3.2,1.3s2.3-0.4,3.2-1.3C274.6,250.8,274.6,248,272.9,246.2z\"<\/span>\/><\/span>\n<\/svg<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Podsumowanie<\/h3>\n\n\n\n
Jak widzisz na powy\u017cszych przyk\u0142adach wykonanie prostych i \u015brednio zaawansowanych animacji na plikach SVG jest mo\u017cliwe bez instalacji i poznawania zewn\u0119trznych bibliotek. Pewnym minusem tego rozwi\u0105zania jest fakt, \u017ce musimy mie\u0107 dost\u0119p do programu graficznego i umiej\u0119tno\u015bci, kt\u00f3re pozwol\u0105 nam przygotowa\u0107 pliki odpowiedzialne za poszczeg\u00f3lne stany animacji, jednak\u017ce zawsze mo\u017cemy poprosi\u0107 o to grafika, kt\u00f3ry przygotowywa\u0142 dane ikony lub inne elementy graficzne.<\/p>\n\n\n","protected":false},"excerpt":{"rendered":"
Animacje ju\u017c dawno temu sta\u0142y si\u0119 sta\u0142ym elementem stron internetowych, mo\u017cemy wykonywa\u0107 je na wiele sposob\u00f3w w zale\u017cno\u015bci od typu elementu oraz poziomu skomplikowania samej animacji. Dzisiaj chcia\u0142bym pokaza\u0107 w jaki spos\u00f3b mo\u017cemy doda\u0107 animacje do plik\u00f3w SVG. Jak pewnie wiesz, ten typ plik\u00f3w obs\u0142uguje animacje CSS i mo\u017cemy je wprowadzi\u0107 zar\u00f3wno w samym pliku […]<\/p>\n","protected":false},"author":7,"featured_media":406,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,10],"tags":[86,87,33,88,85],"class_list":["post-391","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","category-js","tag-animacje","tag-animate","tag-css","tag-plik-svg","tag-svg"],"_links":{"self":[{"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/posts\/391","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/comments?post=391"}],"version-history":[{"count":14,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/posts\/391\/revisions"}],"predecessor-version":[{"id":690,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/posts\/391\/revisions\/690"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/media\/406"}],"wp:attachment":[{"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/media?parent=391"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/categories?post=391"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/tags?post=391"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Teraz przejd\u017amy do skryptu, kt\u00f3ry b\u0119dzie uruchamia\u0142 animacje na okre\u015blon\u0105 akcj\u0119 u\u017cytkownika, przyjmijmy, \u017ce animacja ma zosta\u0107 uruchomiona po klikni\u0119ciu w ikon\u0119. Do uruchomienia samej animacji wykorzystamy metod\u0119 beginElement()<\/a><\/code>. Musimy wi\u0119c utworzy\u0107 tablic\u0119 z wszystkimi \u015bcie\u017ckami, kt\u00f3re b\u0119d\u0105 animowane, w pliku SVG doda\u0142em do ka\u017cdej z nich klas\u0119 animate<\/code>, maj\u0105c tak\u0105 tablic\u0119 dodajemy funkcj\u0119 addEventListener(\"click\")<\/code> , kt\u00f3ra zostanie uruchomiona w momencie klikni\u0119cia w ikon\u0119 SVG i, wykorzystuj\u0105c metod\u0119 beginElements()<\/code> uruchomi ona animacj\u0119 ka\u017cdej \u015bcie\u017cki z tablicy. Dzia\u0142aj\u0105cy przyk\u0142ad takiego rozwi\u0105zania mo\u017cesz zobaczy\u0107 tutaj<\/a>.<\/p>\n\n\n\n