SVG Radius Tåge

SVG radialgrad - <radialGradient>

<radialGradient> Elementet bruges til at definere en radialgrad (radieladning).

<radialGradient> Elementet skal være indlejret i <defs> indholdet af markeringen.<defs> Elementet er en forkortelse for definition (definitions) og indeholder definitioner af specielle elementer (f.eks. filtre).

Eksempel 1

Definer en ellipse med en radialgrad fra hvid til blå:

Dette er SVG-koden:

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

Prøv Det Selv

Kodeforklaring:

• id-attributten i <radialGradient>-etiketten definerer den unikke navn på gradationen
• cx, cy og r-attributter definerer den yderste cirkel, fx og fy definerer den indre cirkel
• Farverummet for den definerede gradation kan bestå af to eller flere farver. Hver farve specificeres med en <stop>-markering
• offset-attribut bruges til at definere start- og slutpositionen for farvegradationen
• fill-attribut linker ellipselementet til den definerede gradation

Eksempel 2

Definer en anden ellipse med en radialgrad fra hvid til blå:

Dette er SVG-koden:

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

Prøv Det Selv