HTML5 SVG 2D Introduction 10 - Définition et utilisation des filtres

Auteur：Eve Cole Date de mise à jour：2025-04-04 01:00:03

Les filtres peuvent être considérés comme la caractéristique la plus puissante de SVG. Ils vous permettent d'ajouter des effets de filtre qui ne sont disponibles que dans des logiciels professionnels en graphiques (éléments graphiques et éléments de conteneur). Cela vous permet de générer et de modifier facilement les images du côté client. De plus, le filtre ne détruit pas la structure du document d'origine, il est donc également très maintenable.

Les filtres sont définis par les éléments du filtre : si nécessaire, ajoutez des attributs de filtre aux graphiques ou aux conteneurs qui nécessitent des effets de filtre et se référez aux filtres pertinents.

Les éléments de filtre contiennent de nombreuses opérations atomiques filtrantes; Chaque opération atomique effectue une opération graphique de base sur l'objet entrant et produit une sortie graphique. La plupart des opérations atomiques génèrent des résultats essentiellement une image RGBA. L'entrée de chaque opération atomique peut être soit le graphique source, soit le résultat d'autres opérations atomiques. Par conséquent, le processus de citation de l'effet de filtre est d'appliquer les opérations atomiques du filtre pertinentes sur les graphiques source, et enfin de générer un nouveau graphisme et de le rendre.

Lorsque vous utilisez l'attribut de filtre sur un conteneur (comme un élément G), l'effet de filtre sera appliqué à tous les éléments du conteneur. Cependant, les éléments du conteneur ne sont pas rendus directement à l'écran, mais sont temporairement stockés. Les commandes graphiques sont ensuite exécutées dans le cadre du processus de traitement des éléments de filtre référencés, puis de rendu. Ceci est spécifié en utilisant SourceGraphic et Sourcealpha. Cet effet est démontré dans le troisième cas dans le deuxième exemple ci-dessous.

Certains effets de filtre généreront des points de pixel non définis, qui seront transformés en effets transparents.

Jetons un coup d'œil à un exemple:

xmlns = "http://www.w3.org/2000/svg" version = "1.1">

<Title> Exemple d'effet de filtre SVG </TITME>

<ESC> Utilisez divers effets de filtre pour obtenir des effets d'éclairage 3D d'une paire de graphiques. </SESC>

<defs>

<feupecularLighting dans = "blur" SurfacScale = "5" SpectarConstant = ". 75"

spéculArexPonent = "20" Lighting-Color = "# bbbbbbb"

result = "specout">

</fespecularLighting>

<Fecomposite dans = "SourceGraphic" in2 = "SpecOt" Operator = "Arithmetic"

k1 = "0" k2 = "1" k3 = "1" k4 = "0" result = "littaint" />

<verge>

<fémègeNode dans = "OffsetBlur" />

<fémègeNode dans = "Litpaint" />

</memerge>

</filter>

</fs>

<g>

<path fill = "nothere" stroke = "# d90000" tram-width = "10"

D = "M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 Z" />

<path fill = "# d90000"

D = "M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 Z" />

</g>

</svg>

L'effet de cet exemple en cours d'exécution sur Firefox est le résultat de la dernière image:

Remarque: il peut y avoir des différences dans d'autres navigateurs.

Ce filtre utilise 6 effets, à son tour (le rendu à étape est illustré dans l'image ci-dessus :):

FegaussianBlur: Cette étape consiste à effectuer un traitement de flou gaussien; L'entrée de cet effet spécial est la valeur de transparence de l'image source, et la sortie est stockée dans le flou tamponné temporaire. La valeur floue est utilisée comme entrée de Feoffset et Feucular Lighting ci-dessous.

Feoffset: Cette étape consiste à traduire l'image en certaines positions; L'entrée de cet effet est le flou généré à l'étape précédente, générant un nouveau cache OffsetBlur.

FeucularLighting: Cette étape consiste à traiter la surface de l'image avec la lumière. L'entrée est le flou généré dans la première étape, et la sortie est stockée dans la nouvelle spécification de cache.

Deux fois Fécomposite: ces deux étapes combinent différentes couches de cache.

Femerge: Cette étape consiste à fusionner différentes couches. Cette étape est généralement l'étape finale, fusionnant les couches de chaque cache, générant l'image finale et le rendant. Bien que cette étape puisse être terminée avec des effets spéciaux de Fecomposite plusieurs fois, il n'est toujours pas très pratique après tout.

Élément de filtre et zone d'effet de filtre

La zone d'effet du filtre fait référence à la zone où l'effet de filtre fonctionne. La taille de cette zone est définie par les propriétés suivantes de l'élément filtrant:

filterUnits = userspaceonuse | ObjectBoundingbox

Cette propriété définit l'espace de coordonnées utilisé par x, y, largeur et hauteur. Comme d'autres propriétés liées à l'unité, cette propriété a deux valeurs: userspaceonuse et objectboundingbox (par défaut).

UserspaceOnUse représente le système de coordonnées utilisateur qui utilise l'élément qui fait référence à l'élément de filtre.

ObjectBoundingbox signifie utiliser le pourcentage de la boîte de délimitation qui fait référence à l'élément de filtre comme plage de valeur.

x, y, largeur, hauteur

Ces propriétés définissent la zone rectangulaire où fonctionne le filtre. L'effet de filtre ne sera pas appliqué à des points au-delà de cette zone. La valeur par défaut de x, y est de -10% et la valeur par défaut de largeur et de hauteur est de 120%.

filtre

Cette propriété définit la taille de la zone de cache intermédiaire, donc elle définit également la qualité de l'image mise en cache. Normalement, cette valeur n'est pas requise et le navigateur sélectionnera la valeur appropriée elle-même. Généralement, la zone d'effet du filtre doit être définie pour correspondre exactement au point de fond et au point un par un, ce qui apportera certains avantages d'efficacité.

En plus de ces propriétés, les propriétés suivantes de l'élément filtrant sont également importantes:

primitiveUnits = userspaceonuse | ObjectBoundingbox

Cette propriété définit l'espace de coordonnées utilisé par les coordonnées et les longueurs dans chaque opération atomique. La valeur de cette propriété est UserspaceOnUse et ObjectBoundingbox. Mais la valeur par défaut est UserspaceOnuse.

xLink: href = <iri>

Cette propriété est utilisée pour se référer à d'autres éléments de filtre dans l'élément de filtre actuel.

Il convient de noter que l'élément de filtre héritera uniquement les attributs de son nœud parent et n'héritera pas les attributs de l'élément qui fait référence à l'élément filtrant.

Présentation du filtre

Les différentes opérations atomiques filtrantes ne seront pas décrites en détail. Vous pouvez simplement vérifier les documents officiels en cas de besoin. Jetons un coup d'œil aux points communs de ces opérations. À l'exception de l'attribut In, les autres attributs ci-dessous sont disponibles pour toutes les opérations atomiques.

x, y, largeur, hauteur

Je ne dirai pas grand-chose sur ces propriétés. Ils définissent la zone où fonctionnent les atomes de filtre, donc il pourrait tout aussi bien devenir la zone filtrante. Ces attributs sont limités par la zone d'action de l'élément filtrant. Par défaut, les valeurs sont respectivement de 0, 0, 100% et 100%. La région d'action de ces atomes dépasse celle de l'élément filtrant ne fonctionne pas.

résultat

Stockez les résultats de cette étape. Après avoir spécifié le résultat, d'autres opérations ultérieures du même élément de filtre peuvent être spécifiées en entrée en utilisant dans. Vous le saurez en faisant référence à l'exemple ci-dessus. Si cette valeur est omise, elle ne peut être utilisée que comme entrée implicite pour l'étape suivante suivante. Notez que si la prochaine étape suivante a déjà spécifié l'entrée avec In, l'étape spécifiée à l'étape suivante doit prévaloir.

dans

Indique l'entrée de cette étape. Si l'attribut in est omis, le résultat de l'étape précédente sera utilisé par défaut comme entrée de cette étape. Si l'étape In est omise, SourceGraphic sera utilisé comme valeur (voir la description ci-dessous). L'attribut in peut se référer à la valeur stockée dans le résultat précédent, ou spécifier les 6 valeurs spéciales suivantes :

SourceGraphic: cette valeur représente l'entrée pour utiliser l'élément graphique actuel comme opération.

Sourcealpha: Cette valeur représente l'entrée pour utiliser la valeur alpha de l'élément graphique actuel comme opération.

BackgroundImage: cette valeur représente l'utilisation de la capture d'écran de l'arrière-plan actuelle comme entrée dans l'opération.

Backgroundalpha: Cette valeur représente l'entrée de l'opération en utilisant la valeur alpha de la capture d'écran de l'arrière-plan actuelle.

FillPaint: cette valeur utilise la valeur de l'attribut de remplissage de l'élément graphique actuel en entrée dans l'opération.

TRADPAINT: Cette valeur utilise la valeur de l'attribut de troupe de l'élément graphique actuel comme entrée à l'opération.

Parmi ces valeurs, BackgroundImage et Backgroundalpha peuvent être difficiles à comprendre. Jetons un coup d'œil à ces deux valeurs ci-dessous.

Capture d'écran d'accès

Normalement, nous pouvons utiliser directement la capture d'écran d'arrière-plan de l'élément qui fait référence à l'élément de filtre comme image source de l'effet filtre. Les valeurs représentant cette entrée sont BackgroundImage et Backgroundalpha, la précédente contient les valeurs de couleur et d'alpha, et ce dernier ne contient que les valeurs alpha. Afin de prendre en charge cette utilisation, il est également nécessaire d'activer explicitement cette fonctionnalité sur l'élément qui fait référence à l'élément filtrant, qui nécessite de définir la propriété Activer-Background de l'élément.

Activer-Background = accumuler | Nouveau [<x> <y> <largeur> <Hight>] | hériter

Cette propriété ne peut être utilisée que pour les éléments de conteneur, et il définit comment prendre des captures d'écran d'arrière-plan.

La nouvelle valeur représente: permet aux éléments enfants du conteneur d'accéder à la capture d'écran de l'arrière-plan du conteneur, et les éléments enfants du conteneur sont rendus à l'arrière-plan et sur l'appareil.

L'accumulation est la valeur par défaut, et son effet dépend du contexte: si l'élément de conteneur parent utilise Activer Background: Nouveau, tous les éléments graphiques du conteneur participeront au rendu de l'arrière-plan. Sinon, cela signifie que le conteneur parent n'est pas prêt à prendre une capture d'écran d'arrière-plan et que l'élément graphique l'affichage de cet élément n'est affiché que sur l'appareil.

L'exemple suivant démontre l'effet de ces valeurs:

xmlns = "http://www.w3.org/2000/svg" version = "1.1">

<Title> Exemple d'utilisation de captures d'écran d'arrière-plan </TITAL>

<SESC> Les exemples suivants expliquent l'utilisation de captures d'écran de fond dans différentes situations </SESC>

<defs>

<filtre id = "shiftbgandblur"

filterUnits = "userspaceonuse" x = "0" y = "0">

<SESC> Ce filtre rejette l'image source, mais utilise des captures d'écran d'arrière-plan </SESC>

</filter>

<filter id = "shiftbgandblur_withsourcegraphic"

filterUnits = "userspaceonuse" x = "0" y = "0">

<SESC> Cet effet spécial de filtre combine des captures d'écran de fond et des images de l'élément actuel </ESC>

<verge>

<fémègeNode dans = "blur" />

<fémègeNode dans = "SourceGraphic" />

</memerge>

</filter>

</fs>

<esc> La première image est l'effet de ne pas ajouter de filtre </SCRE>

</g>

</g>

<SESC> La deuxième image consiste à utiliser les effets de filtre sur le conteneur </SESC>

</g>

</g>

<SESC> La troisième image consiste à utiliser l'effet de filtre sur le conteneur interne, à faire attention à la différence par rapport à la deuxième image </ssc>

</g>

</g>

<ESC> La quatrième image consiste à utiliser les effets du filtre sur les éléments graphiques </SESC>

<Polygon Points = "160,25 160,125 240,75" Fill = "Blue"

filter = "url (#shiftbgandblur)" />

</g>

</g>

<ESC> La cinquième image consiste à utiliser différents effets de filtre sur les éléments graphiques </SESC>

<Polygon Points = "160,25 160,125 240,75" Fill = "Blue"

filter = "url (#shiftbgandblur_withsourcegraphic)" />

</g>

</g>

</svg>

Les rendus sont les suivants (la première ligne est les rendus finaux, et la deuxième ligne est l'effet de filtre):

Cet exemple contient 5 parties :

1. Les images du premier groupe n'utilisent aucun effet de filtre.

2. Le deuxième groupe utilise la même image, mais permet l'effet de l'utilisation de l'arrière-plan.

3. Le troisième groupe utilise la même image, mais utilise l'effet de filtre dans le conteneur interne.

4. Le quatrième groupe utilise des effets de filtre sur les éléments du conteneur de contenu.

5. Le dernier groupe utilise le même effet de filtre que le quatrième groupe et fusionne l'image source.

Le concept de filtres est en fait très simple, mais le code pour chaque effet semble plus compliqué. En fait, nous serons clairs après l'avoir essayé. Cependant, comme différents navigateurs prennent en charge SVG différemment, l'effet spécifique doit être essayé par vous-même avant de l'utiliser.

Référence pratique

Index du script: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx

Centre de développement: https://developer.mozilla.org/en/svg

Référence populaire: http://www.chinasvg.com/

Document officiel: http://www.w3.org/tr/svg11/