SVG (2)

text
W SGV poza obrazami może istnieć także tekst. Określa się go załomocą znacznika text, także on posiada atrybuty x i y. Kolor tekstu definiuje się za pomocą atrybutu FILL lub styli kaskadowych. Mogą być one wpisane w znacznik lub przyjąć każdą z trzech form w których mogą występować.
tspan
Znacznik tspan oferuje duże możliwości formatowania tekstu. Można dzięki niemu ustalić położenie pojedynczych liter. Ma to następującą postać:
<text style="fill:red" x="20" y="1cm">
To jest znacznik tekst, a poniżej
<tspan x="20px 30px 50px 70px 80px" y="3cm">
tspan
</tspan>
</text>

Powyższy fragment dokumentu wyświetli nam napis "To jest znacznik text, a poniżej" , a poniżej napis "tspan" gdzie pierwsza literka będzie oddalona od brzegu dokumentu o 20px, druga o 10 od pierwszej, następna 20 od poprzedniej, kolejna tak samo, ostatnia znowu o dziesięć. Tak więc uzyskamy ciekawy efekt. Możemy oczywiście wpisać styl za pomocą atrybutu style, np. większą cześć tekstu zabarwić na czerwono, a mniejszą na niebiesko.

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 tych wartości "CSS", "XML" lub "auto" (domyślne ustawienie). Teraz animowany element wie co ma być animowane ( właściwość fill obiektu "kolo").
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ść.

W SVG wyróżniamy dwa rodzaje gradietów:linear gradients (liniowe) i radial gradiets (radialne). Gradiety umieszcza się pomiędzy parą znaczników <def> i </def>. Gradiety służą do stopniowego przechodzenia z jednego koloru w drugi. Odnoszą się do atrybutów STROKE i FILL.
Przykład pochodzi z przykłady ze strony W3C.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG December 1999//EN"
"http://www.w3.org/Graphics/SVG/SVG-19991203.dtd">
<svg width="4in" height="3in">
<desc>Linear gradient example
</desc>
<g>
<defs>
<linearGradient id="MyGradient">
<stop offset="0%" style="color:#F60"/>
<stop offset="70%" style="color:#FF6"/>
</linearGradient>
</defs>
<rect style="fill: url(#MyGradient)" width="20" height="15.8"/>
</g>
</svg>

W tym o to gradiecie definiowane jest przejście z koloru F60 do FF6. Póżniej jest ono wywoływane w prostokącie (rect) jako kolor wypełnienienia. Atrybut offset określ w jakim stopni ma zajść przejście z jednego koloru do drugiego. Za pomocą atrybutu id zawartego w znaczniku <linearGradient> podaje się nazwę gradietu. W znaczniku <rect/> dodane zostało odwołanie do gradietu za pomocą wartośći url, po której następuje w nawiasie nazwa gradietu. Nazwa gradietu musi zostać poprzedzona #. Maksymalną wartością atrybut offswt jest 100%, a minimalną 0%. Początek i konic gradietu muszą zostać zdefiniowane. Granica użytego w gradiecie koloru musi zostać zdefiniowana w "stop" elemencie. Element końcowy jest '"dzieckiem" gradietu liniowego i radialnego. Poniżej jest pokazany przykład z przykładu ze strony W3
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG December 1999//EN"
"http://www.w3.org/Graphics/SVG/SVG-19991203.dtd">
<svg width="4in" height="3in">
<desc>Radial gradient example with three gradient stops
</desc>
<g>
<defs>
<radialGradient id="MyGradient">
<stop offset="0%" style="color:white"/>
<stop offset="50%" style="color:red"/>
<stop offset="100%" style="color:black"/>
</radialGradient>
</defs>
<circle style="fill: url(#MyGradient)" r="42"/>
</g>
</svg>

Jak można było zauważyćjest to przykład gradietu radialnego. Pierwszy atrybut określ, że przejście zaczyna się od koloru białego, później w przechodzi do niepełnego czerwonego, aby przejść do czarnego.