SVG Radial Gradient - <radialGradient>
Das <radialGradient> Element wird verwendet , um einen radialen Gradienten zu definieren.
Das <radialGradient> Element muss innerhalb eines verschachtelt werden <defs> -Tag. Das <defs> -Tag ist die Abkürzung für Definitionen und enthält Definition spezieller Elemente (such as gradients) .
Beispiel 1
Definieren Sie eine Ellipse mit einem radialen Farbverlauf von weiß bis blau:
Hier ist der SVG-Code:
Beispiel
<svg height="150" width="500">
<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-opacity:0" />
<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
</radialGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55"
fill="url(#grad1)" />
</svg>
Versuch es selber " Code explanation:
- Das id - Attribut des <radialGradient> Tag definiert einen eindeutigen Namen für den Gradienten
- Die cx, cy und r Attribute definieren den äußersten Kreis und die fx und fy definieren den innersten Kreis
- Die Farbpalette für einen Gradienten können aus zwei oder mehreren Farben zusammengesetzt sein. Jede Farbe wird angegeben mit einem <stop> -Tag. Der offset - Attribut wird verwendet , um festzulegen , wo der Gradient Farbe beginnen und enden
- Die fill Attribut verknüpft die Ellipse - Element auf den Gradienten
Beispiel 2
Definieren Sie eine andere Ellipse mit einem radialen Farbverlauf von weiß bis blau:
Hier ist der SVG-Code:
Beispiel
<svg height="150" width="500">
<defs>
<radialGradient id="grad2" cx="20%" cy="30%" r="30%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255);
stop-opacity:0" />
<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
</radialGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>
Versuch es selber "