ugrás a tartalomhoz

SVG animáció

asam9 · 2016. Dec. 8. (Cs), 13.15
Sziasztok,

Adott svg-vel készített kör, aminek a körvonala animálva van. Ha 0-100%-ig fut az animáció nincs semmilyen probléma, viszont, ha 0-60%-ig, akkor nem úgy fut le az animáció, mint ahogy arra számítanék. A probléma, hogy az animáció elején két helyen is megjelenik a kitöltés, és csak a végén szűnik meg ez a jelenség. Hogyan lehetne ezt kiküszöbölni?

A másik kérdésem, hogy a 251.33-es szám (100%) honnan jön?

JSFiddle
‹ Video lejátszási idő (teljes) kinyerése-2 Video lejátszási idő (teljes) kinyerése ›
 ■
1

Hogyan kérdezzünk

vbence · 2016. Dec. 8. (Cs), 22.24
Szia, milyen tulajdonságát animálod, mi a legegyszerűbb példa ahol előjön a hiba, akkor is előjön ha kör helyett három 60%os arc-ból rakod össze a kört?
2

A dashoffset tulajdonságot

asam9 · 2016. Dec. 9. (P), 00.23
A dashoffset tulajdonságot animálom. Egy kész példából indultam ki, de ott is csak a 100%-os animáció volt bemutva. Nem ismerem alaposan az svg lelkivilágát, csak Illustrator-ban szoktam módosítgatni, amit szükséges, meg törlöm belőle a comment-et, id-t, esetleg átírkálom a színeket, ... de egyelőre ez a max, szóval három 60%-os arc-ból szerintem nem fogom tudni megcsinálni :) Meg több darabból macerásabb lenne animálni. Arra gondoltam, hogy hátha csak valami egyszerű oka van, ami miatt így működik és csak a paraméterket kell megváltoztatni vagy kicsit kiegészíteni általam ismeretlen attribútummal.
Egyébként 0-100 között bármely számot fel kellene tudnia venni, a 60% csak egy példa.
Az egyszerű példát meg tudod nézni a JSFiddle-ös linken.