SVG-Gaussian-häivytys

SVG-sivuvaikutuksen täytyy olla määritelty <defs>-tunnisteessa

Gaussian-häivytys

Tunniste <filter> määrittää SVG-sivuvaikutuksen.<filter>-tunniste käyttää pakollista id-ominaisuutta määrittääkseen, mihin grafiikkaan sovelletaan sivuvaikutusta?

Tunniste <filter> täytyy olla sisällä <defs>-tunnisteessa.<defs> on definitions-kuvauksen lyhenne, joka mahdollistaa erityisten elementtien, kuten sivuvaikutusten, määrittämisen

Kopioi seuraava koodi muistiin ja tallenna tiedosto nimellä "filter1.svg". Aseta tiedosto verkkokansioon:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg"
<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>
<ellipse cx="200" cy="150" rx="70" ry="40"
style="fill:#ff0000;stroke:#000000;
stroke-width:2;filter:url(#Gaussian_Blur)"/>
</svg>

Koodin selitys:

  • Tunniste <filter>:n id-ominaisuus määrittää sivuvaikutteelle ainutlaatuisen nimen (sama sivuvaikutus voidaan käyttää useilla elementeillä dokumentissa)
  • filter:url-ominaisuus yhdistää elementin sivuvaikutteeseen. Kun sidotaan sivuvaikutteeseen id, on käytettävä #-merkkiä
  • Sivuvaikutteiset vaikutukset määritellään tunnisteella <feGaussianBlur>. fe-pääte voidaan käyttää kaikissa sivuvaikutteissa
  • Tunniste <feGaussianBlur>:n stdDeviation-ominaisuus määrittää häivytyksen voimakkuuden
  • Osio "in="SourceGraphic"" määrittää koko kuvan luomaa vaikutusta

Näytä esimerkki

Esimerkki toisesta stdDeviation-arvosta

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg"
<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="20"/>
</filter>
</defs>
<ellipse cx="200" cy="150" rx="70" ry="40"
style="fill:#ff0000;stroke:#000000;
stroke-width:2;filter:url(#Gaussian_Blur)"/>
</svg>

Näytä esimerkki