SVG/Filtry

W SVG filtry służą do modyfikowania wyglądu elementów poprzez stosowanie efektów wizualnych. Filtry działają poprzez pobieranie grafiki wejściowej, przetwarzanie jej za pomocą operacji filtrowania i tworzenie grafiki wyjściowej.

Istnieje kilka filtrów dla grafiki SVG. Oto niektóre z powszechnie używanych:

<feGaussianBlur>: Ten filtr rozmywa grafikę wejściową za pomocą algorytmu rozmycia gaussowskiego. Stopień rozmycia można kontrolować za pomocą atrybutu stdDeviation.

<feColorMatrix>: Ten filtr może służyć do modyfikowania koloru grafiki wejściowej. Można go użyć do konwersji grafiki wejściowej na skalę szarości lub do regulacji jasności, kontrastu i nasycenia grafiki.

<feComposite>: Ten filtr łączy ze sobą dwie grafiki wejściowe przy użyciu różnych operacji łączenia, takich jak nad, do środka, na zewnątrz, na górze itp. Ten filtr może być używany do łączenia grafik lub tworzenia efektów maski.

<feDropShadow>: Ten filtr dodaje efekt cienia do grafiki wejściowej. Kolor, przesunięcie i rozmycie cienia można kontrolować za pomocą różnych atrybutów.

<feTurbulence>: Ten filtr generuje turbulentny wzór szumu. Ten filtr może być używany do tworzenia różnych tekstur i wzorów.

<feBlend>: Ten filtr łączy ze sobą dwie wejściowe grafiki przy użyciu różnych trybów mieszania, takich jak mnożenie, ekran, nakładanie itp. Ten filtr może być używany do tworzenia różnych efektów, takich jak wycieki światła, gradacja kolorów i inne.

Aby zastosować filtr do elementu SVG, możesz użyć elementu <filter> i odwołać się do filtra za pomocą atrybutu filter elementu docelowego. Oto przykład:

<svg>
  <filter id="myFilter">
    <feGaussianBlur stdDeviation="5" />
  </filter>
  <rect x="50" y="50" width="100" height="100" fill="blue" filter="url(#myFilter)" />
</svg>

W tym przykładzie utworzyliśmy filtr rozmycia gaussowskiego i przypisaliśmy mu identyfikator. Następnie stosujemy filtr do prostokąta, używając atrybutu filter i funkcji url() w celu odniesienia do filtra. Wynikowy prostokąt zostanie rozmyty na podstawie atrybutu stdDeviation filtra.