Przejścia liniowe SVG

Polecane kursy:

<defs> i <filter> <defs> wszystkie SVG filtry znajdują się w<defs> definiowane w

Elementy są używane do definiowania filtrów SVG. Elementy są skrótem od definicji (definitions) i zawierają definicje specjalnych elementów (np. filtrów).Elementy są używane do definiowania filtrów SVG. <filter>

Element SVG <feOffset> ma obowiązkowy atrybut id, używany do identyfikacji filtra. Następnie grafika wskazuje na używany filtr.

Przykład 1

<feOffset> Elementy są używane do tworzenia efektów cienia. Podejście polega na tym, że najpierw uzyskuje się SVG grafikę (obraz lub element), a następnie delikatnie przenosi ją w płaszczyźnie xy.

Pierwszy przykład przesuwał prostokąt (używając <feOffset>），a następnie nałożenie oryginalnego obrazu na przesunięty obraz (używając <feBlend>）：

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

Spróbuj sam!

Wyjaśnienie kodu:

• Atrybut id elementu <filter> definiuje unikalną nazwę filtra
• <rect> elementu atrybut filter łączy ten element z filtrem "f1"

Przykład 2

Teraz można rozmyć przesuniętą obraz (używając <feGaussianBlur>）：

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

Spróbuj sam!

Wyjaśnienie kodu:

• Atrybut stdDeviation elementu <feGaussianBlur> definiuje stopień rozmycia

Przykład 3

Teraz, ustaw cień na czarny:

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

Spróbuj sam!

Wyjaśnienie kodu:

• <feOffset> atrybut in zostaje zmieniony na "SourceAlpha", co używa kanału Alpha zamiast całego RGBA pixela do rozmycia

Przykład 4

Teraz, przetwarzaj cień na jeden kolor:

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

Spróbuj sam!

Wyjaśnienie kodu:

• <feColorMatrix> Filtr przyciemniający zmienia kolory przesuniętego obrazu, aby były bliższe czerni. Trzy wartości '0.2' w macierzy mnożą się przez kanały czerwony, zielony i niebieski. Zmniejszenie ich wartości sprawia, że kolory są bliższe czerni (czarna to 0)