SVG Gradient - Radioactive
SVG radioaktywne stopniowe - <radialGradient>
<RadialGradient> służy do definiowania gradientu radialnego.
<RadialGradient> tag muszą być zagnieżdżona <defs> wnętrzu. <DEFS> jest skrótem, definicje, takie jak specjalne elementy, które mogą być zdefiniowane jak gradientem.
Przykład 1
Definiowanie gradientu radialnego od białego do niebieskiego owalu:
Oto kod SVG:
Przykłady
<Xmlns SVG = "http://www.w3.org/2000/svg" version = "1.1">
<DEFS>
<RadialGradient id = "grad1" cx = "50%" cy = "50%" r = "50%" fx = "50%" fy = "50%">
<Stop offset = "0%" style = "stop-color: rgb (255,255,255);
stop-krycie: 0 "/>
<Stop offset = "100%" style = "stop-color: rgb (0,0,255); stop-opacity: 1" />
</ RadialGradient>
</ DEFS>
<Elipsa cx = "200" cy = "70" rx = "85" Ry = "55" wypełnić = "url (# grad1)" />
</ Svg>
<DEFS>
<RadialGradient id = "grad1" cx = "50%" cy = "50%" r = "50%" fx = "50%" fy = "50%">
<Stop offset = "0%" style = "stop-color: rgb (255,255,255);
stop-krycie: 0 "/>
<Stop offset = "100%" style = "stop-color: rgb (0,0,255); stop-opacity: 1" />
</ RadialGradient>
</ DEFS>
<Elipsa cx = "200" cy = "70" rx = "85" Ry = "55" wypełnić = "url (# grad1)" />
</ Svg>
Spróbuj »
Dla użytkowników przeglądarki Opera widoku pliku SVG (kliknij prawym przyciskiem myszy na grafice źródłem podgląd SVG).
Analiza kodu:
- Atrybut id <radialGradient> Znacznik może być unikalna nazwa definicji gradientu
- CX, CY, a atrybutem R określa krąg peryferyjnych oraz Fx i Fy określić najgłębszą krąg
- Gradient kolorystyka może składać się z dwóch lub więcej kolorów. Każdy kolor jest określony za pomocą <stop> tag. Przesunięcie jest używany do określenia początku i końca gradientu
- Wypełnienie elementu nieruchomości podłączenia się do gradientu elipsy
Przykład 2
Zdefiniowane radialny gradient z białego na niebieski owal innego:
Oto kod SVG:
Przykłady
<Xmlns SVG = "http://www.w3.org/2000/svg" version = "1.1">
<DEFS>
<RadialGradient id = "grad1" cx = "20%" cy = "30%" r = "30%" fx = "50%" fy = "50%">
<Stop offset = "0%" style = "stop-color: rgb (255,255,255);
stop-krycie: 0 "/>
<Stop offset = "100%" style = "stop-color: rgb (0,0,255); stop-opacity: 1" />
</ RadialGradient>
</ DEFS>
<Elipsa cx = "200" cy = "70" rx = "85" Ry = "55" wypełnić = "url (# grad1)" />
</ Svg>
<DEFS>
<RadialGradient id = "grad1" cx = "20%" cy = "30%" r = "30%" fx = "50%" fy = "50%">
<Stop offset = "0%" style = "stop-color: rgb (255,255,255);
stop-krycie: 0 "/>
<Stop offset = "100%" style = "stop-color: rgb (0,0,255); stop-opacity: 1" />
</ RadialGradient>
</ DEFS>
<Elipsa cx = "200" cy = "70" rx = "85" Ry = "55" wypełnić = "url (# grad1)" />
</ Svg>
Spróbuj »
Dla użytkowników przeglądarki Opera widoku pliku SVG (kliknij prawym przyciskiem myszy na grafice źródłem podgląd SVG).