|
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.
|
|