SVG radial toning

SVG radialgradient - <radialGradient>

<radialGradient> Elementet används för att definiera radialgradient (radiell gradient).

<radialGradient> Elementet måste vara inneslott i <defs> inom taggen.<defs> Elementet är en förkortning för definition (definitions) och innehåller definitioner av specialelement (t.ex. filter).

Exempel 1

Definiera en ellipse som har en radialgradient från vit till blå:

Detta är 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>

Prova själv

Kodförklaring:

• id-attributet i <radialGradient>-taggen definierar gradientens unika namn
• cx, cy och r-attributen definierar den yttersta cirkeln, fx och fy definierar den inre cirkeln
• Gradientens färgomfång kan bestå av två eller flera färger. Varje färg specificeras med en <stop>-tagg
• offset-attributet används för att definiera gradientens början och slut
• fill-attributet länkar ellipsen till gradienten

Exempel 2

Definiera en annan ellipse som har en radialgradient från vit till blå:

Detta är 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>

Prova själv