SVG Bulanık Etki

<defs> ve <filter>

Tüm SVG filtreleri <defs> içinde tanımlanır.<defs> elementi, tanımlamaları (definitions) kısaltmasıdır ve özel elementlerin (örneğin, filtreler) tanımlarını içerir.

<filter> elementi, SVG filtresini tanımlamak için kullanılır.<filter> elementi, filtreyi tanımlamak için zorunlu bir id özelliğine sahiptir. Ardından grafik, kullanılacak filtreye işaret eder.

SVG <feGaussianBlur>

Örnek 1

<feGaussianBlur> Bulanık etki oluşturmak için kullanılan element:

Bu SVG kodu:

<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>

Kendi kendine deneyin

Kod açıklaması:

• <filter> elementinin id özelliği, filtre için benzersiz bir adı tanımlar
• <feGaussianBlur> elementi bulanık etkiyi tanımlar
• in="SourceGraphic" olarak tüm elementin etkilerini tanımlar
• stdDeviation özelliği bulanıklık miktarını tanımlar
• <rect> elementinin filter özelliği bu elementi "f1" filtresine bağlar