SVG Lineer Geçiş

<defs> ve <filter>

Tüm SVG süzgeçleri <defs> içinde tanımlanır.<defs> elemanı tanımlamaların (definitions) kısaltmasıdır, özel elemanların (örneğin, süzgeçler) tanımlarını içerir.

<filter> elemanı SVG süzgeçlerini tanımlamak için kullanılır.<filter> elemanı bir zorunlu id özelliği içerir, süzgeci tanımlamak için kullanılır. Ardından grafik, kullanmak istediğiniz süzgece işaret eder.

SVG <feOffset>

Örnek 1

<feOffset> Elemanı gölge etkisi oluşturmak için kullanır. Düşünce: Öncelikle bir SVG grafiklerini (görüntü veya eleman) al, ardından xy düzleminde biraz hareket ettirin.

İlk örnek bir dikdörtgeni kaydırdı (kullanarak <feOffset>），daha sonra orijinal görüntüyü kaydırılmış görüntünün üstüne karıştırabilirsiniz (kullanarak <feBlend>）：

Bu SVG kodu:

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

Kişisel olarak deneyin

Kod açıklaması:

• <filter> elemanının id özelliği süzgecin benzersiz adını tanımlar
• <rect> elemanının filter özelliği bu elemanı "f1" süzgece bağlar

Örnek 2

Şimdi, görüntüyü bulanıklaştırabilirsiniz (kullanarak <feGaussianBlur>）：

Bu SVG kodu:

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

Kişisel olarak deneyin

Kod açıklaması:

• feGaussianBlur elemanının stdDeviation özelliği bulanıklığı tanımlar

Örnek 3

Şimdi, gölgeyi siyah yapın:

Bu SVG kodu:

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

Kişisel olarak deneyin

Kod açıklaması:

• <feOffset> ögesinin in özelliği "SourceAlpha" olarak değiştirildi, bu da Alpha kanalını tüm RGBA piksel yerine kullanır

Örnek 4

Şimdi, gölgeyi bir renge dönüştürün:

Bu SVG kodu:

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

Kişisel olarak deneyin

Kod açıklaması:

• <feColorMatrix> Filtre, kaydırılmış görüntüdeki renkleri daha接近的黑色转换。Matrisindeki üç '0.2' değeri kırmızı, yeşil ve mavi kanallara çarpılır. Değerlerini azaltmak renkleri daha接近的黑色（siyah 0） yapar