SVG Gradient - Radioaktive
SVG radioaktive schrittweise - <RadialGradient>
<RadialGradient> Element wird verwendet, um die radiale Gradienten zu definieren.
<RadialGradient> Tag muss innerhalb von <defs> Innen verschachtelt werden. <Defs> -Tag ist die Abkürzung Definitionen, wie zum Beispiel spezielle Elemente, die wie Gradienten definiert werden können.
Beispiel 1
Definieren Sie einen radialen Farbverlauf von weiß bis blau oval:
Hier ist der SVG-Code:
Beispiele
<Svg xmlns = "http://www.w3.org/2000/svg" version = "1.1">
<Defs>
<RadialGradient id = "grad1" cx = "50%" cy = "50%" r = "50%" fx = "50%" fy = "50%">
Stopp <offset = "0%" style = "stop-color: rgb (255,255,255);
Stop-Opazität: 0 "/>
<Stop offset = "100%" style = "stop-color: rgb (0,0,255); Stop-Opazität: 1" />
</ RadialGradient>
</ Defs>
<Ellipse cx = "200" cy = "70" rx = "85" ry = "55" fill = "url (# grad1)" />
</ Svg>
<Defs>
<RadialGradient id = "grad1" cx = "50%" cy = "50%" r = "50%" fx = "50%" fy = "50%">
Stopp <offset = "0%" style = "stop-color: rgb (255,255,255);
Stop-Opazität: 0 "/>
<Stop offset = "100%" style = "stop-color: rgb (0,0,255); Stop-Opazität: 1" />
</ RadialGradient>
</ Defs>
<Ellipse cx = "200" cy = "70" rx = "85" ry = "55" fill = "url (# grad1)" />
</ Svg>
Versuchen »
Für Opera Benutzer: Ansicht SVG - Datei (Rechtsklick auf die Vorschau Quelle SVG - Grafiken).
-Code - Analyse:
- id-Attribut <RadialGradient> -Tag können Sie einen eindeutigen Namen für den Gradienten Definition sein
- CX, CY, und r Attribut definiert den äußersten Kreis und Fx und Fy den innersten Kreis definieren
- Gradient Farbbereich kann aus zwei oder mehr Farben zusammengesetzt sein. Jede Farbe angegeben wird mit einem <stop> Tag. Offset verwendet wird, um den Beginn und das Ende des Gradienten zu definieren
- Füllen Eigenschaftselement zum Gradienten der Ellipse zu verbinden
Beispiel 2
Definierte radiale Gradienten von weiß bis blau oval anderen:
Hier ist der SVG-Code:
Beispiele
<Svg xmlns = "http://www.w3.org/2000/svg" version = "1.1">
<Defs>
<RadialGradient id = "grad1" cx = "20%" cy = "30%" r = "30%" fx = "50%" fy = "50%">
Stopp <offset = "0%" style = "stop-color: rgb (255,255,255);
Stop-Opazität: 0 "/>
<Stop offset = "100%" style = "stop-color: rgb (0,0,255); Stop-Opazität: 1" />
</ RadialGradient>
</ Defs>
<Ellipse cx = "200" cy = "70" rx = "85" ry = "55" fill = "url (# grad1)" />
</ Svg>
<Defs>
<RadialGradient id = "grad1" cx = "20%" cy = "30%" r = "30%" fx = "50%" fy = "50%">
Stopp <offset = "0%" style = "stop-color: rgb (255,255,255);
Stop-Opazität: 0 "/>
<Stop offset = "100%" style = "stop-color: rgb (0,0,255); Stop-Opazität: 1" />
</ RadialGradient>
</ Defs>
<Ellipse cx = "200" cy = "70" rx = "85" ry = "55" fill = "url (# grad1)" />
</ Svg>
Versuchen »
Für Opera Benutzer: Ansicht SVG - Datei (Rechtsklick auf die Vorschau Quelle SVG - Grafiken).