Effet de flou SVG

L'élément <feGaussianBlur> de SVG affiche un effet de flou. Le filtre <feGaussianBlur> applique un flou gaussien à l'image d'entrée, Internet Explorer 9et les versions antérieures ne prennent pas en charge les filtres SVG.

<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>

L'effet d'image généré après l'exécution est le suivant :

Explication de l'utilisation

• L'attribut id du <filter> définit le nom unique du modèle.

• L'élément <feGaussianBlur> est utilisé pour définir l'effet de flou.

• La partie in = "SourceGraphic" de l'élément <feGaussianBlur> est utilisée pour définir l'effet créé pour l'élément entier.

• L'attribut stdDeviation est utilisé pour définir la quantité de flou.

• La propriété filter de l'élément <rect> est utilisée pour lier l'élément à1”Filtre.