SVG Gaussian Blur

Οι φίλτρα SVG πρέπει να οριστούν μέσα στην ετικέτα <defs>

Gaussian Blur

Η ετικέτα <filter> χρησιμοποιείται για να ορίσει τα φίλτρα SVG. Ποια ιδιότητα είναι απαραίτητη για να ορίσει την εφαρμογή του φίλτρου σε μια γραφήματα;

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

Κατ' ευκαιρία, αντιγράψτε τον παρακάτω κώδικα στο σημειωματάριο και αποθηκεύστε το αρχείο ως "filter1.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>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>
<ellipse cx="200" cy="150" rx="70" ry="40"
style="fill:#ff0000;stroke:#000000;
stroke-width:2;filter:url(#Gaussian_Blur)"/>
</svg>

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

  • Η ιδιότητα id της ετικέτας <filter> ορίζει έναν μοναδικό όνομα για το φίλτρο (το ίδιο φίλτρο μπορεί να χρησιμοποιηθεί από πολλαπλά στοιχεία του έγγραφου)
  • Η ιδιότητα filter:url χρησιμοποιείται για να συνδέσει το στοιχείο με το φίλτρο. Όταν συνδέεται το id του φίλτρου, πρέπει να χρησιμοποιηθεί το σύμβολο #
  • Οι εφέ των φίλτρων ορίζονται μέσω της ετικέτας <feGaussianBlur>. Το πρόθεμα fe χρησιμοποιείται για όλα τα φίλτρα
  • Η ιδιότητα stdDeviation του ετικέτας <feGaussianBlur> ορίζει το βαθμό της rozmazania
  • Το τμήμα in="SourceGraphic" ορίζει το αποτέλεσμα που δημιουργείται από ολόκληρη την εικόνα

Εξετάστε το Παράδειγμα

Ένας παράδειγμα με διαφορετική τιμή stdDeviation

?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>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="20"/>
</filter>
</defs>
<ellipse cx="200" cy="150" rx="70" ry="40"
style="fill:#ff0000;stroke:#000000;
stroke-width:2;filter:url(#Gaussian_Blur)"/>
</svg>

Εξετάστε το Παράδειγμα