Latest web development tutorials

SVG Unschärfe - Gaußsche Unschärfe

Hinweis: Internet Explorer und Safari unterstützt keine SVG - Filter!


<Defs> und <Filter>

SVG filtert alle Internet definiert in <defs> -Element. <Defs> Element definiert kurz und enthält spezielle Elemente (zB Filter) Definition.

<Filter> -Tag wird verwendet, SVG-Filter zu definieren. <Filter> -Tag mit der erforderlichen id-Attribut die grafische Anwendung zu definieren, die Filter?


SVG <feGaussianBlur>

Beispiel 1

<FeGaussianBlur> Element wird verwendet, um eine Unschärfe-Effekt zu erzeugen:

fegaussianblur

Hier ist der SVG-Code:

Beispiele

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<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>

Versuchen »

Für Opera Benutzer: Ansicht SVG - Datei (Rechtsklick auf die Vorschau Quelle SVG - Grafiken).

-Code - Analyse:

  • Der einzige Name <filter> Element id-Attribut definiert einen Filter
  • <FeGaussianBlur> Element definiert Unschärfe
  • in = "SourceGraphic" Dieser Abschnitt definiert die Wirkung durch das gesamte Bild erstellt
  • stdDeviation Attribut definiert die Menge der Unschärfe
  • Filtereigenschaften <rect> Element wird verwendet, um die Elemente zu verlinken auf "F1" Filter