Effet de flou SVG
Remarque : Internet Explorer et Safari ne prennent pas en charge les filtres SVG !
<defs> et <filter>
Tous les filtres SVG Internet sont définis dans l'élément <defs> La définition de l'élément <defs> est courte et contient des définitions pour des éléments spéciaux (tels que des filtres). La balise
<filter> est utilisée pour définir les filtres SVG. La balise <filter> utilise l'attribut id requis pour définir quel filtre appliquer au graphique ?
SVG <feGaussianBlur>
Exemple 1 L'élément
<feGaussianBlur> est utilisé pour créer un effet de flou :
ci-dessous se trouve le code SVG :
Instance
<!DOCTYPE html> <html> <body> <p><b>Note: </b>Internet Explorer and Safari do not support SVG filters yet!</p> <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> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
Pour les utilisateurs d'Opera : afficher le fichier SVG (clic droit sur la source d'aperçu graphique SVG).
Analyse du code :
<filter>L'attribut id de l'élément définit le nom unique d'un filtre
-
<feGaussianBlur>L'élément définit l'effet de flou
in="SourceGraphic"Cette section définit l'effet créé à partir de l'image entière
L'attribut stdDeviation définit la quantité de flou
<rect> L'attribut filter de l'élément est utilisé pour lier l'élément au filtre "f1"
