SVG linjär toning

Kursrekommendation:

<defs> och <filter> <defs> Alla SVG-filter finns i<defs> elementet definierar.

Elementet används för att definiera SVG-filter. Elementet är en förkortning av (definitions) och innehåller definitioner av specialelement (t.ex. filter).Elementet används för att definiera SVG-filter. <filter>

SVG <feOffset>-elementet har en nödvändig egenskap id för att identifiera filteret. Därefter pekar grafiken på det filter som ska användas.

Exempel 1

Elementet används för att skapa skuggverk. Tanken är: först få en SVG-grafik (bild eller element), och sedan flytta det något på xy-planen.

Den första exempelkopian avskiljde en rektangel (använd , <feBlend>）：

Detta är SVG-koden:

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

Prova det själv

Kodförklaring:

  • Elementet <filter> har egenskapen id som definierar filterets unika namn
  • <rect>-elementets filter-egenskap länkar elementet till "f1"-filteret

Exempel 2

Nu kan du sudda avbildningen med avstånd (använd <feGaussianBlur>）：

Detta är SVG-koden:

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

Prova det själv

Kodförklaring:

  • Elementet <feGaussianBlur> har egenskapen stdDeviation som definierar mörklighet

Exempel 3

Nu, sätt skuggan till svart:

Detta är SVG-koden:

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

Prova det själv

Kodförklaring:

  • <feOffset> elementets in-attribut ändras till "SourceAlpha", som använder Alpha-kanalen istället för hela RGBA-pixeln för suddighet

Exempel 4

Nu, behandla skuggan med en färg:

Detta är SVG-koden:

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

Prova det själv

Kodförklaring:

  • <feColorMatrix> Filter används för att konvertera färgerna i den förskjutna bilden till närmare svart. De tre '0.2'-värdena i matrisen multipliceras med röd, grön och blå kanaler. Att minska deras värden gör färgerna närmare svart (svart är 0)