SVG lineaariset aste-asteet

Kurssivihje:

<defs> ja <filter> <defs> Kaikki SVG-suodattimet ovat<defs> elementissä määritetty.

Elementti määrittää SVG-suodattimet. Elementti on (definitions) -sanan lyhenne, joka sisältää erityisten elementtien (kuten suodattimien) määrittelyt.Elementti määrittää SVG-suodattimet. <filter>

SVG <feOffset>-elementti omaa pakollisen id-ominaisuuden, joka tunnistaa suodattimen. Sitten kuva viittaa käytettävään suodattimeen.

Esimerkki 1

Elementti käytetään varjoeffektien luomiseen. Ajatus on: ensin otetaan SVG-kuva (kuva tai elementti), ja sitten siirretään sitä hieman xy-avaruudessa.

Ensimmäisessä esimerkissä kohdistettiin suorakulmio (käyttämällä , <feBlend>）：

Tämä on SVG-koodi:

<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="keltainen" filter="url(#f1)" />
</svg>

Kokeile itse

Koodin selitys:

• <filter> -elementin id-ominaisuus määrittää suodattimen yksilöllisen nimen
• <rect> -elementin filter-ominaisuus liittää kyseisen elementin "f1"-suodattimeen

Esimerkki 2

Nyt voidaan häivyttää kuvaa epäsuorasti (käyttämällä <feGaussianBlur>）：

Tämä on SVG-koodi:

<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="keltainen" filter="url(#f2)" />
</svg>

Kokeile itse

Koodin selitys:

• Elementin <feGaussianBlur> stdDeviation-ominaisuus määrittää häivytyksen määrän

Esimerkki 3

Nyt aseta varjo mustaksi:

Tämä on SVG-koodi:

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

Kokeile itse

Koodin selitys:

• <feOffset> -elementin in-ominaisuus muutetaan "SourceAlpha":ksi, joka käyttää Alpha-kanavaa eikä koko RGBA-piirsirouhautta sumennukseen

Esimerkki 4

Nyt käsittele varjo yhdeksi väriksi:

Tämä on SVG-koodi:

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

Kokeile itse

Koodin selitys:

• <feColorMatrix> Värijäsen, joka käytetään muuntamaan etäisessä kuvassa olevia värejä lähemmäs mustaa. Matrisen kolme '0.2' -arvoa kertovat punainen, vihreä ja sininen kanavat. Arvojen vähentäminen tekee väreistä lähemmäs mustaa (musta on 0)