Radial Gradient SVG

SVG Ραδιενεργό Διανύσματα - <radialGradient>

<radialGradient> Το στοιχείο χρησιμοποιείται για να ορίσει μια ραδιενεργή διανύσματα (radiant gradient).

<radialGradient> Το στοιχείο πρέπει να περιλαμβάνεται μέσα στο <defs> στον τάφο.<defs> Το στοιχείο είναι η συντομευμένη μορφή του ορισμού (definitions), η οποία περιέχει ορισμούς για ειδικά στοιχεία (π.χ. φίλτρα).

Παράδειγμα 1

Ορίζει μια ελλειψοειδή, η οποία έχει μια ραδιενεργή διανύσματα από λευκό προς το μπλε:

Αυτό είναι το κώδικα SVG:

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

Δοκιμάστε το προσωπικά

Επεξήγηση κώδικα:

• Η ιδιότητα id της ετικέτας <radialGradient> ορίζει το μοναδικό όνομα του διανύσματος
• Οι ιδιότητες cx, cy και r ορίζουν τον εξωτερικό κύκλο, οι fx και fy ορίζουν τον εσωτερικό κύκλο
• Το εύρος χρωμάτων του διανύσματος μπορεί να αποτελείται από δύο ή περισσότερα χρώματα. Κάθε χρώμα ορίζεται με την ετικέτα <stop>
• Η ιδιότητα offset ορίζει την αρχή και το τέλος της θέσης του διανύσματος
• Η ιδιότητα fill συνδέει το ελλειψοειδή στο διανύσματα

Παράδειγμα 2

Ορίζει μια άλλη ελλειψοειδή, η οποία έχει μια ραδιενεργή διανύσματα από λευκό προς το μπλε:

Αυτό είναι το κώδικα SVG:

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

Δοκιμάστε το προσωπικά