Najnowsze tutoriale tworzenie stron internetowych
 

SVG Efekty rozmycia


<Defs> i <Filtr>

Wszystkie filtry www SVG są zdefiniowane w <defs> elementu. <defs> Element jest skrótem od definicji i zawiera definicję elementów specjalnych (such as filters) .

<filter> element jest używany do definiowania filtrów SVG. <filter> element ma wymaganego atrybutu id, który identyfikuje filtr. Grafika przypomina następnie do filtra do użycia.


SVG <feGaussianBlur>

Przykład 1

<feGaussianBlur> element jest stosowany do tworzenia efektów rozmycia:

fegaussianblur

Oto kod SVG:

Przykład

<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>
Spróbuj sam "

Code explanation:

  • id atrybut <filter> element definiuje unikalną nazwę dla filtra
  • Efekt rozmycia jest zdefiniowana z <feGaussianBlur> elementu
  • in="SourceGraphic" część określa, że efekt jest tworzony dla całego elementu
  • stdDeviation atrybut określa ilość rozmycia
  • filter atrybut <rect> elementu łączy element do "f1" filtrem