Program JSBuilder 1.5 - darmowy polski edytor JavaScript!

 Komputery    

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



Warez on-line - www.warezpl.com - First Warez Portal

 


Copyright 1999-2000 Magazyn internetowy NoName
Wszelkie prawa zastrzeżone