SVG pehmennysvaikutus

<defs> ja <filter>

Kaikki SVG-suodattimet ovat <defs> Elementissä määritellään.<defs> Elementti on definitions-kirjauksen lyhenne, joka sisältää erityisten elementtien (kuten suodattimien) määrittelyt.

<filter> Elementti määrittää SVG-suodattimen.<filter> Elementillä on pakollinen id-ominaisuus, joka tunnistaa suodattimen. Sitten grafiikka viittaa suodatimeen, jota käytetään.

SVG <feGaussianBlur>

Esimerkki 1

<feGaussianBlur> Elementti luodaan hämärtymisvaikutuksia varten：

Tämä on SVG-koodi：

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

Kokeile itse

Koodin selitys：

• <filter> -elementin id-ominaisuus määrittää suodattimen ainutlaatuisen nimen
• <feGaussianBlur> -elementti määrittää hämärtymisvaikutuksen
• in="SourceGraphic" määrittää koko elementin luomalla vaikutuksen
• stdDeviation-ominaisuus määrittää pehmennysmäärän
• <rect> -elementin filter-ominaisuus liittää kyseisen elementin "f1"-suodattimeen