Ραδιογενής Διαχρονισμό SVG

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

Διαφάνεια ακτίνας

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

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

Καταγράψτε τον παρακάτω κώδικα στο τμήμα σημειώσεων και αποθηκεύστε το αρχείο ως "radial1.svg". Τοποθετήστε το αρχείο στον κατάλογο web σας:

Περιβάλλον XML version="1.0" standalone="no"
Περιβάλλον 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>
Ετικέτα <radialGradient id="grey_blue" cx="50%" cy="50%" r="50%"
fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200);
stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);
stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx="230" cy="200" rx="110" ry="100"
style="fill:url(#grey_blue)"/>
</svg>

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

Η ιδιότητα id του ετικέτας <radialGradient> μπορεί να καθορίσει έναν μοναδικό όνομα για τη διαφάνεια, η ιδιότητα fill:url(#grey_blue) συνδέει το στοιχείο ellipse με αυτή τη διαφάνεια, οι ιδιότητες cx, cy και r ορίζουν τον εξωτερικό κύκλο, ενώ οι fx και fy ορίζουν τον εσωτερικό κύκλο Η γκάμα των διαφανειών μπορεί να αποτελείται από δύο ή περισσότερες χρώματα. Κάθε χρώμα καθορίζεται από μια ετικέτα <stop>. Η ιδιότητα offset χρησιμοποιείται για να ορίσει την αρχή και το τέλος της διαφάνειας.

Εμφάνιση Παραδείγματος

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

Περιβάλλον XML version="1.0" standalone="no"
Περιβάλλον 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>
<radialGradient id="grey_blue" cx="20%" cy="40%" r="50%"
fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200);
stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);
stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx="230" cy="200" rx="110" ry="100"
style="fill:url(#grey_blue)"/>
</svg>

Εμφάνιση Παραδείγματος