SVG Verwischen

SVG zeigt den verschwommenen Effekt mit dem Element <feGaussianBlur>. Der <feGaussianBlur>-Filter führt eine Gaussische Verzerrung auf das Eingangsbild aus, Internet Explorer 9und frühere Versionen unterstützen keine SVG-Filter.

<svg height="250" width="250">
　　<defs>
　　　　<filter id="p1" x="0" y="0">
　　　　　　<feGaussianBlur in="SourceGraphic" stdDeviation="15"　/>
　　　　</filter>
　　</defs>
　　<rect width="120" height="120" stroke="green" stroke-width="3" fill="purple" filter="url(#p1)"　/>
</svg>

Das erzeugte Bildergebnis nach dem Ausführen ist wie folgt:

Erklärung der Verwendung

• Das id-Attribut des <filter> definiert den eindeutigen Namen des Musters.

• Das <feGaussianBlur>-Element wird verwendet, um den Verwischungseffekt zu definieren.

• Der Teil in = " SourceGraphic " des <feGaussianBlur>-Elements wird verwendet, um den gesamten Effekt des Elements zu definieren.

• Die stdDeviation-Eigenschaft wird verwendet, um die Menge der Verwischung zu definieren.

• Der filter-Attribut des <rect>-Elements wird verwendet, um das Element mit " p1”Filter.”