SVG (3)

Atrybuty gradietów liniowych

gradientUnits="userSpace|userSpaceOnUse|objectBoundingBox". Definiują system położenia - x1, x2, y1, y2. Jeśli gradientUnits="userSpace" (wartość domyślna) x1, y1, x2, y2 reprezentują aktułalne używane wartości. Jesli gradientUnits="userSpaceOnUse", wtedy x1, y1, x2, y2 reprezentują wartości używane kiedy element 'linearGradient' jest wywoływany. Jeśli gradientUnits="objectBoundingBox" wtedy x1, y1, x2, y2 reprezentują wartości systemu pozycji gdzie (0,0) jest (minx,miny), a (1,1) jest (maxx, maxy). gradientTransform = "". Zawiera definicje dodatkowych, opcjonalnych przekształceń od systemu położenia gradientów. x1, x2, y1, y2 określa gradient vector z gradietu liniowego. Ten gradient vector dostarcza do liniowego gradietu początkowy i końcowy punkt. Wartości x1, y1, x2, y2 mogą być także numerami lub wartościami procentowymi które głównie decydują o wartości atrybutu gradientUnits.

gradientUnits

Typ wartości

Opis

"userSpace"

Numer

Wartość reprezentuje aktułalne położenie

"userSpace"

procent

Wartość reprezentuje dystans wzdłuż X-axis cuurent viewport

"objectBoundingBox"

Numer

Wartość reprezentuje a pozycją pomiędzy odbiciem danej figury, gdzie (0,0) jest (minx,miny) i (1,1) jest wartością (maxx,maxy).


Wartości x2, y1u y2 są takie same jak x1. Domyślna wartość tych trzech to 0%. Kolejną warością jest wartość spreadMethod które może przyjąć jedną z trzech wartości: pad, reflect i repeat. Wartość ta wskazuje co wydarzy się jeśli gradiet wystartuje lub zakończy w granicy target rectangle. Wartość pad jest używana do określania kolorów którymi obiekt docelowy gradietu zostaje wypełniony. Wartość reflect określa wzór odbicia gradietu start-to-end, end-to-start, start-to-end, itd. Wartość repeat określa sposób powtarzenia odbicia gradietu start-to-end, start-to-end, start-to-end, itd. Następny atrybut to xlink:href. W celu zrozumienia wszystkich atrybutów zaczynających się od xlink proponuje zapoznać się z kursem XLink Language.

Gradienty radialne i ich wartości

Gradienty radialne definiuje się za pomocą elementu radialGradient. Pierwsza wartością którą omówimy jest wartość gradientUnits. Ma ona następujące wartości: userSpace, userSpaceOnUse i objectBoundingBox. Definiują system pozycji. Domyślną wartością gradientUnits jest userSpace. Jeśli gradientUnits równa się userSpaceOnUse wartości cx, cy, r, fx, fy reprezentują aktualną pozycję. Jeśli gradientUnits="objectBoundingBox" wtedy cx, cy, r, fx, fy reprezentują wartości gdzie (0,0) jest (minx,miny), a (1,1) jest (maxx,maxy). gradientTransform = "<transform-list>". Określa opcjonalne przekształcenie z systemu pozycji. Kolejna wartość to cx i cy. Ich wartość to "<coordinate>". Definiują największy okrąg radialnego gradientu. Gradient jest rysowany jako 100% gradientu końcowego jest mapowany do największego obwodu koła. Domyślna wartość to 50%. Wartości r, fx, fy i cy mają domyślną wartość 50%. Atrybut xlink:href to samo co z gradientem liniowym.

Gradiet Stop

Koniec przejścia z koloru do koloru jest definiowany przez element 'stop'. Jest on bardzo użyteczny jeśli chcemy zatrzymać przejście z koloru a do b i rozpocząć przejście z obecnego stanu b do c. Gradiet stop nie jest osobnym gradientem i nie jest wywoływany przez coś w stylu stopGradient. Jest to porostu atrybut wpisany w w znacznik gradient. Pierwszy atrybut który omówimy to offset. Może on przyjąć wartość typu liczba lub wartość procentowa. Wartość numer to od 0 do 1, a procentowa od 0 do 100%. Dla gradientów liniowych offset reprezentuje wartość wzdłuż gradient vector. Dla gradietu radialnego reprezentuje procentową odległość z (fx,fy) do największego okręgu. Wartości offset podaje się za pomocą atrybutu style. Ma to następującą postać:

Przykład 1g.1

       
<radialGradient id="gradiet1">

         <stop offset="0%" style="stop-color:white"/>

         <stop offset="50%" style="stop-color:red"/>

         <stop offset="100%" style="stop-color:blue"/>  

</radialGradient>

Właściwość stop-color wskazuje jaki kolor ma być używany do zatrzymania gradientu. Kolor ICC może być zdefiniowany w fill i stroke. Wartość stop opacity określa nieprzezroczystość kiedy gradiet się zatrzyma.

Kurs pochodzi z serwisu HTMLZone serwis webmasterów.


Copyright 2001 by magazyn @t.Wszelkie prawa zastrzeżone.