Παράλληλες Μεταβάσεις SVG

<defs> και <filter>

Όλα τα SVG φίλτρα βρίσκονται <defs> στοιχεία.<defs> ορισμένοι στοιχεία.

Το στοιχείο χρησιμοποιείται για τη διάφωνη ορισμό SVG φίλτρα. Το στοιχείο είναι η συντομευση για ορισμό (definitions) που περιέχει ορισμούς για ειδικά στοιχεία (π.χ. φίλτρα).Το στοιχείο χρησιμοποιείται για τη διάφωνη ορισμό SVG φίλτρα. <filter>

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

Παράδειγμα 1

<feOffset> Το στοιχείο χρησιμοποιείται για τη δημιουργία σκιών. Η ιδέα είναι: Πρώτα να πάρουμε ένα σχήμα SVG (εικόνα ή στοιχείο), και στη συνέχεια να το μετακινήσουμε略微 στην επίπεδο xy.

Ο πρώτος παράδειγμα αποκλίνει ένα τετράγωνο (χρησιμοποιώντας <feOffset>），τότε συνδυάζετε την αρχική εικόνα με την εικόνα αποκλίσης στην κορυφή της (χρησιμοποιώντας <feBlend>）：

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

<svg height="120" width="120">
  <defs>
    <filter id="f1" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feBlend in="SourceGraphic" in2="offOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f1)" />
</svg>

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

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

• Η ιδιότητα id του στοιχείου <filter> καθορίζει το μοναδικό όνομα του φίλτρου
• <rect> η ιδιότητα filter συνδέει το στοιχείο με τον φίλτρο "f1"

Παράδειγμα 2

Τώρα, μπορείτε να σκοτεινάσετε την εικόνα με αποκλίση (χρησιμοποιώντας <feGaussianBlur>）：

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

<svg height="140" width="140">
  <defs>
    <filter id="f2" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f2)" />
</svg>

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

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

• Το στοιχείο <feGaussianBlur> έχει την ιδιότητα stdDeviation που καθορίζει το βαθμό διαφάνειας

Παράδειγμα 3

Τώρα, ρυθμίστε τη σκιά σε μαύρο:

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

<svg height="140" width="140">
  <defs>
    <filter id="f3" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f3)" />
</svg>

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

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

• <feOffset> ο στοιχείο in ιδιότητα αλλαγμένη σε "SourceAlpha", χρησιμοποιεί τη σύνθετη γκάμα του RGBA για το φύλλωμα

Παράδειγμα 4

Τώρα, μετατρέψτε τη σκιά σε ένα χρώμα:

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

<svg height="140" width="140">
  <defs>
    <filter id="f4" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feColorMatrix result="matrixOut" in="offOut" type="matrix"
      values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
      <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f4)" />
</svg>

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

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

• <feColorMatrix> ο φίλτρο χρησιμοποιείται για να μετατρέψει τα χρώματα της μετατοπισμένης εικόνας σε πιο κοντά στο μαύρο. Οι τρεις τιμές '0.2' στο μητρώο πολλαπλασιάζονται με τους καναλιούς κόκκινου, πράσινου και μπλε. Η μείωση των τιμών τους κάνει τα χρώματα πιο κοντά στο μαύρο (μαύρο είναι 0)