Linear Gradient SVG

Διαβάθμιση SVG

Η διαβάθμιση είναι μια ομαλή μετάβαση από ένα χρώμα σε ένα άλλο. Επιπλέον, μπορεί να εφαρμοστεί πολλαπλή διαβάθμιση σε ένα στοιχείο.

Στο SVG υπάρχουν δύο κύρια τύποι διαβάθμισης:

  • Γραμμική διαβάθμιση
  • Ακτινική διαβάθμιση

SVG γραμμική διαβάθμιση - <linearGradient>

<linearGradient> Το στοιχείο χρησιμοποιείται για να ορίσει γραμμικές διαβάθμισης.

<linearGradient> Το στοιχείο πρέπει να είναι ενσωματωμένο στο <defs> Στο εσωτερικό του σήματος.<defs> Το στοιχείο είναι μια συντομευση της λέξης (definitions) και περιέχει τις οριστικές περιγραφές ειδικών στοιχείων (π.χ. φίλτρα).

Η γραμμική διαβάθμιση μπορεί να οριστεί ως οριζόντια, κάθετη ή γωνιακή διαβάθμιση:

  • Δημιουργούμε μια οριζόντια διαβάθμιση όταν y1 και y2 είναι ίσα και x1 και x2 δεν είναι ίσα:
  • Δημιουργούμε μια κάθετη διαβάθμιση όταν x1 και x2 είναι ίσα και y1 και y2 δεν είναι ίσα:
  • Δημιουργούμε μια γωνιακή διαβάθμιση όταν x1 και x2 είναι διαφορετικά και y1 και y2 δεν είναι ίσα:

Παράδειγμα 1

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

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

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

Προσπαθήστε το個人

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

  • Η ιδιότητα id του ετικέτας <linearGradient> ορίζει το μοναδικό όνομα της διαβάθμισης
  • Οι ιδιότητες x1, x2, y1, y2 του ετικέτας <linearGradient> ορίζουν την αρχή και το τέλος της διαβάθμισης
  • Το εύρος των χρωμάτων της διαβάθμισης μπορεί να αποτελείται από δύο ή περισσότερα χρώματα. Κάθε χρώμα ορίζεται με την ετικέτα <stop>
  • Η ιδιότητα offset χρησιμοποιείται για να ορίσει την αρχή και το τέλος της διαβάθμισης χρωμάτων
  • Η ιδιότητα fill συνδέει το στοιχείο της ελλειψοειδούς με τη διαβάθμιση

Παράδειγμα 2

Ορίζει μια ελλειψοειδή, με κάθετη γραμμική διαβάθμιση από κίτρινο σε κόκκινο:

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

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>

Προσπαθήστε το個人

Παράδειγμα 3

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

SVG

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

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad3" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad3)" />
  <text fill="#ffffff" font-size="45" font-family="Verdana" x="150" y="86">
  SVG</text>
</svg>

Προσπαθήστε το個人

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

  • Το στοιχείο <text> χρησιμοποιείται για την προσθήκη κειμένου