En son web geliştirme öğreticiler
 

SVG bulanıklık Etkileri


<defs> ve <filter>

Tüm internet SVG filtreleri içinde tanımlanır <defs> elemanı. <defs> eleman tanımlarına kısaltmasıdır ve özel eleman tanımını içerir (such as filters) .

<filter> elemanı bir SVG filtresi tanımlamak için kullanılır. <filter> eleman filtresi tanımlayan gerekli kimlik özniteliği vardır. Bundan sonra, grafik kullanımı filtreye işaret eder.


SVG <feGaussianBlur>

Örnek 1

<feGaussianBlur> eleman bulanıklık efektleri oluşturmak için kullanılır:

fegaussianblur

İşte SVG kodu:

Örnek

<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>
Kendin dene "

Code explanation:

  • id öznitelik <filter> eleman filtresi için benzersiz bir ad tanımlar
  • Bulanıklık etkisi ile tanımlanır <feGaussianBlur> elemanının
  • in="SourceGraphic" bölümü tamamını etkileyen elemanı için oluşturulduğunu tanımlar
  • stdDeviation özelliği, bulanıklık miktarını tanımlamaktadır
  • filter öznitelik <rect> Bir elemanı bağlayan "f1" filtreye