|
| |

SVG - część druga.
Po wprowadzaniu w świat SVG (poprzedni numer), czas wziąć się za konkrety :)
Animacje kolorami w SVG deklaruje się za pomocą elementu <animationColor>.
Animacja kolorami. Można animować kolorami przy użyciu elementu <animateColor> na elemencie SVG.
Przykład.
<svg xml:space="preserve" width="4in" height="3in" ;> <g id="kolo"> <circle style="fill:blue;stroke:red;" cx="100" cy="100" r="100"> <animateColor attributeName="fill" attributeType="CSS" values="red;blue;yellow;green;red" dur="10s" repeatCount="indefinite"/> </circle> </g> </svg>
Atrybut attributeName określa, jaka właściwość lub atrybut ma być animowany. Atrybut attributeType może mieć jedną z wartości: "CSS", "XML" lub "auto" (domyślne ustawienie). Teraz animowany element wie co ma być animowane właściwość fill obiektu "cricle").
Właściwości i wartości atrybutów mogą mieć następujące wartości: - from - określa początkową wartość animacji - to - określa końcową wartość animacji - by - określa względną pośrednią wartość animacji - values -lista wartości rozdzielona przecinkami
W naszym przypadku właściwość fill jest animowana poprzez wartości koloru, od czerwonej poprzez niebieską, żółtą, zieloną i wraca do czerwonego. Na końcu atrybuty dur i repeatCount kontrolują czas animacji. Całkowity czas trwania animacji zostaje określony przez dur, w tym przypadku ma 10 sekund. Liczbę powtórzeń animacji zostaje określona przez atrybut repeatCount. Poprzez ustawienie wartości repeatCount na "indefinite", animacja bedzie powtarzana w nieskończoność.
Artykuł pochodzi z serwisu HTMLZone - www.language.pnet.pl. Wszelkie prawa zastrzeżone.
Piotr "Merlin" Krajewski
e-mail: nacz.htmlzone@pnet.pl
HTMLZone - serwis dla webmasterów - www.language.pnet.pl


| |