Ανάκλαση SVG

Οι διαφάνειες SVG πρέπει να οριστούν μέσα στην ετικέτα <defs>.

Διαφάνεια SVG

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

Στο SVG, υπάρχουν δύο κύριες τύποι διαφάνειας:

  • Γραμμική διαφάνεια
  • Αντιραδιενέργεια διαφάνεια

Γραμμική διαφάνεια

Η ετικέτα <linearGradient> χρησιμοποιείται για να ορίσει γραμμικές διαφάνειες SVG.

Η ετικέτα <linearGradient> πρέπει να είναι ενσωματωμένη στον εσωτερικό του <defs>. Η ετικέτα <defs> είναι η συντομευμένη μορφή του definitions και μπορεί να ορίσει ειδικά στοιχεία όπως διαφάνειες.

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

  • Όταν το y1 και το y2 είναι ίσα, ενώ το x1 και το x2 είναι διαφορετικά, μπορεί να δημιουργηθεί μια διαφάνεια οριζόντιας μορφής
  • Όταν το x1 και το x2 είναι ίσα, ενώ το y1 και το y2 είναι διαφορετικά, μπορεί να δημιουργηθεί μια διαφάνεια οριζόντιας μορφής
  • Όταν το x1 και το x2 είναι διαφορετικά, και το y1 και το y2 είναι διαφορετικά, μπορεί να δημιουργηθεί μια διαφάνεια γωνιακής μορφής

Επιτρέψτε να αντιγράψετε τον παρακάτω κώδικα στο μνήμονικο σας, και στη συνέχεια αποθηκεύστε το αρχείο ως "linear1.svg". Τοποθετήστε το αρχείο αυτό στον κατάλογο web σας:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg"
<defs>
<linearGradient id="orange_red" 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="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>
</svg>

Διατύπωση κώδικα:

  • Η ιδιότητα id της ετικέτας <linearGradient> μπορεί να καθορίσει έναν μοναδικό όνομα για τη διαφάνεια
  • Η ιδιότητα fill:url(#orange_red) συνδέει το στοιχείο ellipse με αυτή τη διαφάνεια
  • Οι ιδιότητες x1, x2, y1, y2 της ετικέτας <linearGradient> καθορίζουν τη θέση ξεκινήματος και λήξης της διαφάνειας
  • Η περιοχή χρώματος της διαφάνειας μπορεί να αποτελείται από δύο ή περισσότερα χρώματα. Κάθε χρώμα καθορίζεται από μια ετικέτα <stop>. Η ιδιότητα offset χρησιμοποιείται για να καθορίσει τη θέση ξεκινήματος και λήξης της διαφάνειας.

Ελέγξτε τον παράδειγμα (πίσω από την ουρά)

Ένας άλλος παράδειγμα:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg"
<defs>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="0%" y2="100%">
<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="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>
</svg>

Εμφάνιση Παραδείγματος (Κάθετη Ανάκλαση)