Εφέ Ψυχραιμίας SVG

<defs> και <filter>

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

<filter> Το στοιχείο χρησιμοποιείται για τη διαμόρφωση των φίλτρων SVG.<filter> Το στοιχείο έχει μια υποχρεωτική ιδιότητα id, η οποία χρησιμοποιείται για να αναγνωρίσει το φίλτρο. Στη συνέχεια, η γραφική διαδρομή θα δείχνει το φίλτρο που θα χρησιμοποιηθεί.

SVG <feGaussianBlur>

Παράδειγμα 1

<feGaussianBlur> Το στοιχείο χρησιμοποιείται για τη δημιουργία της επίδρασης θολώματος:

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

<svg height="110" width="110">
  <defs>
    <filter id="f1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f1)" />
</svg>

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

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

  • Η ιδιότητα id του στοιχείου <filter> ορίζει το μοναδικό όνομα του φίλτρου
  • Το στοιχείο <feGaussianBlur> ορίζει την επίδραση θολώματος
  • Η αναφορά "in="SourceGraphic" ορίζει την επίδραση που δημιουργείται για το όλο στοιχείο
  • Η ιδιότητα stdDeviation καθορίζει την ποσότητα της σκοτεινιάς
  • Η ιδιότητα του filter του στοιχείου <rect> συνδέει το στοιχείο με το φίλτρο "f1"