Ultimele tutoriale de dezvoltare web
 

SVG Efecte Estompează


<defs> și <filter>

Toate filtrele de internet SVG sunt definite într - un <defs> Element. <defs> Elementul este prescurtarea de la definițiile și definirea unor elemente speciale (such as filters) .

<filter> Elementul este folosit pentru a defini un filtru SVG. <filter> Elementul are un atribut id obligatoriu care identifică filtrul. Imaginea arată apoi filtrul de utilizat.


SVG <feGaussianBlur>

Exemplul 1

<feGaussianBlur> Elementul este utilizat pentru a crea efecte de blur:

fegaussianblur

Aici este codul SVG:

Exemplu

<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>
Încearcă - l singur »

Code explanation:

  • id atribut al <filter> Element definește un nume unic pentru filtrul
  • Efectul blur este definit cu <feGaussianBlur> elementul
  • in="SourceGraphic" parte definește ca efectul este creat pentru întregul element de
  • stdDeviation atribut definește cantitatea de neclaritate
  • filter atribut al <rect> elementul leagă elementul de la "f1" filtru