Ce chapitre décrit le jeu des fonctions des effets de filtre déclaratifs de SVG, ceux-ci quand ils sont combinés avec les possibilités en 2D de SVG peuvent décrire la plupart des productions graphiques communes sur le Web, de telle façon que leur génération et leur modification côté client puisse être effectuées facilement. De plus, la possibilité d'appliquer des effets de filtre aux éléments graphiques et aux éléments conteneurs de SVG est favorable au maintien d'une structure sémantique du document, au lieu de faire appel à des images qui, non seulement, sont en général dans une résolution fixe, mais aussi qui tendent à obscurcir la sémantique générale des éléments qu'elles remplacent. Ceci est particulièrement vrai pour les effets appliqués au texte.
Un effet de filtre consiste en une succession d'opérations graphiques, appliquées sur un graphique source, dont le produit est un graphique modifié. Le résultat de l'effet de filtre est rendu sur l'appareil cible à la place du graphique source original. Voici une illustration du processus :
Voir cet exemple en SVG (seulement avec navigateur gérant SVG)
On définit un effet de filtre avec un élément 'filter'. Pour appliquer un effet de filtre sur un élément graphique ou un élément conteneur, on paramètre la propriété 'filter' de l'élément donné pour qu'ainsi elle appelle l'effet de filtre.
Chaque élément 'filter' contient un jeu de primitives de filtre comme enfants. Chaque primitive de filtre effectue une seule opération graphique fondamentale (par exemple, un flou ou un effet de lumière) sur une ou plusieurs entrées, donnant un résultat graphique. Comme la plupart des primitives de filtre représentent une certaine forme de traitement d'image, la sortie d'une primitive de filtre est généralement une seule image RGBA.
La source graphique originale ou le résultat d'une primitive de filtre peuvent être utilisés comme entrées pour une ou plusieurs autres primitives de filtre. La réutilisation de la source graphique est couramment employée. Par exemple, un simple filtre peut remplacer un graphique par deux, en ajoutant une copie noire du graphique source original, décalée pour créer un effet d'ombrage. En fait, ce sont deux couches de graphique, les deux ayant la même source graphique originale.
Appliquée aux éléments conteneurs, tel que l'élément 'g', la propriété 'filter' concerne le contenu du groupe comme un tout. Les enfants du groupe ne sont pas rendus directement à l'écran ; plutôt, les commandes graphiques nécessaires à leur rendu sont stockées temporairement. Typiquement, les commandes graphiques sont exécutées comme faisant partie du traitement de l'élément 'filter' appelé via les mots-clés SourceGraphic ou SourceAlpha. Les effets de filtre peuvent s'appliquer aux éléments conteneurs qui n'ont pas de contenu (par exemple, un élément 'g' vide), auquel cas les valeurs SourceGraphic ou SourceAlpha consistent en un rectangle noir transparent de la taille de la région de l'effet de filtre.
Les primitives de filtre résultent parfois en des pixels indéfinis. Par exemple, la primitive de filtre 'feOffset' peut déplacer une image vers le bas et vers la droite, laissant des pixels indéfinis en haut à gauche. Dans ces cas, les pixels indéfinis reçoivent une valeur de noir transparent.
Ce qui suit est un exemple d'effet de filtre.
L'exemple Filtres01 - introduction aux effets de filtre.
<?xml version="1.0"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg width="7.5cm" height="5cm" viewBox="0 0 200 120" xmlns="http://www.w3.org/2000/svg"> <title>Exemple Filtres01 - introduction aux effets de filtre</title> <desc>Un exemple combinant plusieurs primitives de filtre pour obtenir un effet de lumière en 3D sur un graphique qui consiste de la chaîne "SVG" sur un ovale rempli en rouge entouré par un contour ovale rouge.</desc> <defs> <filter id="MonFiltre" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="120"> <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="flou"/> <feOffset in="flou" dx="4" dy="4" result="flouDecalage"/> <feSpecularLighting in="flou" surfaceScale="5" specularConstant=".75" specularExponent="20" lighting-color="#bbbbbb" result="speculaireSortie"> <fePointLight x="-5000" y="-10000" z="20000"/> </feSpecularLighting> <feComposite in="speculaireSortie" in2="SourceAlpha" operator="in" result="speculaireSortie"/> <feComposite in="SourceGraphic" in2="speculaireSortie" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="peintureEclairee"/> <feMerge> <feMergeNode in="flouDecalage"/> <feMergeNode in="peintureEclairee"/> </feMerge> </filter> </defs> <rect x="1" y="1" width="198" height="118" fill="#888888" stroke="blue" /> <g filter="url(#MonFiltre)" > <g> <path fill="none" stroke="#D90000" stroke-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 fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" > <text x="52" y="76">SVG</text> </g> </g> </g> </svg>
![]() |
Voir cet exemple en SVG (seulement avec navigateur gérant SVG)
L'effet de filtre, utilisé dans l'exemple ci-dessus, est répété ici avec des numéros de référence dans la colonne de gauche devant chacune des six primitives de filtre :
1 2 3 4 5 6 |
<filter id="MonFiltre" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="120"> <desc>Produces a 3D lighting effect.</desc> <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="flou"/> <feOffset in="flou" dx="4" dy="4" result="flouDecalage"/> <feSpecularLighting in="flou" surfaceScale="5" specularConstant=".75" specularExponent="20" lighting-color="#bbbbbb" result="speculaireSortie"> <fePointLight x="-5000" y="-10000" z="20000"/> </feSpecularLighting> <feComposite in="speculaireSortie" in2="SourceAlpha" operator="in" result="speculaireSortie"/> <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="peintureEclairee"/> <feMerge> <feMergeNode in="flouDecalage"/> <feMergeNode in="peintureEclairee"/> </feMerge> </filter> |
Les images suivantes montrent les résultats intermédiaires obtenus à partir de chacun des éléments de filtre :
|
|
|
|
|||
|
|
|
La description de l'élément 'filter' suit :
<!ENTITY % filterExt "" > <!ELEMENT filter (%descTitleMetadata;,(feBlend|feFlood| feColorMatrix|feComponentTransfer| feComposite|feConvolveMatrix|feDiffuseLighting|feDisplacementMap| feGaussianBlur|feImage|feMerge| feMorphology|feOffset|feSpecularLighting| feTile|feTurbulence| animate|set %filterExt;)*) > <!ATTLIST filter %stdAttrs; %xlinkRefAttrs; xlink:href %URI; #IMPLIED %langSpaceAttrs; externalResourcesRequired %Boolean; #IMPLIED class %ClassList; #IMPLIED style %StyleSheet; #IMPLIED %PresentationAttributes-All; filterUnits (userSpaceOnUse | objectBoundingBox) #IMPLIED primitiveUnits (userSpaceOnUse | objectBoundingBox) #IMPLIED x %Coordinate; #IMPLIED y %Coordinate; #IMPLIED width %Length; #IMPLIED height %Length; #IMPLIED filterRes %NumberOptionalNumber; #IMPLIED > |
Définitions des attributs :
Les propriétés, dans l'élément 'filter', héritent des ancêtres de celui-ci ; les propriétés n'héritent pas de l'élément qui appelle l'élément 'filter'.
Les éléments 'filter' ne sont jamais rendus directement ; leur seule utilisation est comme quelque chose qu'on peut appeler avec la propriété 'filter'. La propriété 'display' ne s'applique pas aux éléments 'filter' ; ainsi, les éléments 'filter' ne sont pas rendus directement, même si la propriété 'display' a une valeur autre que none, et ils peuvent être appelés, même si la propriété 'display', sur l'élément 'filter' ou l'un de ses ancêtres, a une valeur de none.
La description de la propriété 'filter' est comme suit :
Valeur : | <uri> | none | inherit vf. |
Valeur initiale : | none |
S'applique à : | ceux des éléments conteneurs et aux éléments graphiques |
Héritée : | non |
Pourcentages : | sans objet |
Médias : | visuel |
Animatable: | oui |
Un élément 'filter' peut définir une région du canevas sur laquelle un effet de filtre donné s'applique et peut fournir une résolution pour toute image intermédiaire en tons continus utilisée pour le traitement de toute primitive de filtre basée sur une trame de pixélisation. L'élément 'filter' admet les attributs suivants dont l'action se conjugue pour définir la région de l'effet de filtre :
pixels-x [pixels-y])
indiquet la largeur et la hauteur des images intermédiaires en pixels.
Si l'attribut n'est pas fourni, alors une résolution par défaut raisonnable appropriée à l'appareil
cible sera utilisée. (Pour les écrans, par défaut, une résolution d'affichage appropriée
serait celle en pixels de l'écran courant. Pour l'impression, une résolution d'imprimante
commune approprié telle que 400dpi serait une valeur par défaut).Remarquer que les deux valeurs possibles pour l'attribut filterUnits (i.e., objectBoundingBox et userSpaceOnUse) conduisent à une région de filtre dont l'axe-x et l'axe-y du système de coordonnées sont parallèles, respectivement, aux axe-x et axe-y du système de coordonnées utilisateur de l'élément sur lequel le filtre sera appliqué.
Les implémenteurs peuvent parfois obtenir de meilleures performances quand on peut faire correspondre directement la région de filtre avec les pixels de l'appareil ; ainsi, pour la meilleure performance sur les appareils d'affichage, on suggère aux auteurs de définir leur région de telle manière que les agents utilisateurs SVG puissent aligner la région de filtre, pixel-à-pixel, sur l'arrière-plan. Notamment, pour la meilleure performance d'un effet de filtre, éviter de pivoter ou d'incliner le système de coordonnées utilisateur. Les valeurs explicites pour l'attribut filterRes peuvent soit favoriser, soit nuire aux performances. Si la valeur de filterRes est plus petite que la résolution du filtre automatique (i.e., par défaut), alors l'effet de filtre peut avoir une meilleure performance (généralement, au détriment de la qualité). Si la valeur de filterRes est plus grande que la résolution du filtre automatique (i.e., par défaut), alors la performance de l'effet de filtre sera généralement moindre.
Il est souvent nécessaire de donner un espacement environnant parce que l'effet de filtre peut agir sur des bits légèrement en-dehors de la boîte englobante resserrée d'un objet. Pour cela, on peut donner des valeurs en pourcentage négatives aux attributs x et y et des valeurs de pourcentage supérieures à "100%" aux attributs width et height. C'est la raison pour laquelle les valeurs par défaut de la région de l'effet du filtre sont x="-10%" y="-10%" width="120%" height="120%".
Il existe deux pseudo-entrées d'image pour les effets de filtre, qui sont BackgroundImage et BackgroundAlpha, chacune représentant un cliché-image du canevas en-dessous de la région du filtre au moment où l'élément 'filter' est invoqué. L'entrée BackgroundImage représente à la fois les valeurs de couleur et du canal alpha du canevas (i.e., des valeurs de pixel RGBA), alors que BackgroundAlpha représente le seul canal alpha.
Les implémentations des agents utilisateurs SVG devront souvent maintenir des tampons supplémentaires de l'image d'arrière-plan pour gérer les pseudo-entrées d'image BackgroundImage et BackgroundAlpha. Certaines fois, les tampons d'image d'arrière-plan contiendront un copie en mémoire des opérations de peinture accumulées sur le canevas courant.
Comme les tampons d'image en mémoire peuvent consommer des ressources systèmes conséquentes, le contenu SVG doit indiquer explicitement à l'agent utilisateur que le document nécessite un accès à l'image d'arrière-plan avant de pouvoir utiliser les pseudo-entrées d'image BackgroundImage et BackgroundAlpha. C'est la propriété 'enable-background' qui active l'accès à l'image d'arrière-plan :
Valeur : | accumulate | new [ <x> <y> <largeur> <hauteur> ] | inherit vf. |
Valeur initiale : | accumulate |
S'applique à : | ceux des éléments conteneurs |
Héritée : | non |
Pourcentages : | sans objet |
Médias : | visuel |
Animatable: | non |
La propriété 'enable-background', qui ne s'applique qu'aux éléments conteneurs, gère l'accumulation de l'image d'arrière-plan.
Une valeur de new indique deux choses :
La signification de enable-background: accumulate (la valeur initiale/par défaut) dépend du contexte :
Si un effet de filtre spécifie l'une ou l'autre pseudo-entrée d'image BackgroundImage ou BackgroundAlpha et si aucun élément conteneur ancêtre n'a une valeur de propriété 'enable-background:new', alors la requête de l'image d'arrière-plan constitue techniquement une erreur. Le traitement continuera sans interruption (i.e., aucun message d'erreur) et une image noire transparente sera renvoyée en réponse à cette requête.
Les paramètres optionnels <x>,<y>,<largeur>,<hauteur> de la valeur
new désigne la sous-région de l'espace utilisateur de
l'élément conteneur sur laquelle l'accès à l'image
d'arrière-plan est autorisé à survenir. Ces paramètres induisent éventuellement l'agent
utilisateur à allouer des tampons d'image temporaires plus petits que ceux des valeurs par défaut, ces dernières
pouvant demander à l'agent utilisateur SVG une allocation des tampons aussi grande que la zone de visualisation courante.
Ainsi, les valeurs <x>,<y>,<largeur>,<hauteur> agissent comme un rectangle de rognage net sur le canevas
de l'image d'arrière-plan. Une valeur négative pour <largeur>, ou <hauteur>, provoque une erreur
(voir Le traitement des erreurs). Si on spécifie au moins une mais moins que
quatre des valeurs <x>,<y>,<largeur> et <hauteur> ou si on ne spécifie aucune valeur pour
<largeur> ou <hauteur>, les pseudo-entrées BackgroundImage
et BackgroundAlpha sont traitées comme si le traitement de l'image d'arrière-plan
n'était pas activé.
Supposons que l'on ait un élément E dans le document et que E ait une succession d'ancêtres A1 (son parent immédiat), A2, etc. (Remarque : A0 est E). Chaque ancêtre Ai aura un tampon d'image d'arrière-plan correspondant hors-écran TAMPONi. Le contenu de l'image d'arrière-plan qui est disponible pour un élément 'filter', appelé par E, est défini comme suit :
L'exemple enable-background01 illustre les règles pour le traitement d'une image d'arrière-plan.
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg width="13.5cm" height="2.7cm" viewBox="0 0 1350 270" xmlns="http://www.w3.org/2000/svg"> <title>Exemple enable-background01</title> <desc>Ce galop d'essais montre cinq dessins qui illustrent les règles pour le traitement d'une image d'arrière-plan.</desc> <defs> <filter id="ArrPlanDeplaceFlou" filterUnits="userSpaceOnUse" x="0" y="0" width="1200" height="400"> <desc> Ce filtre écarte la constante SourceGraphic, s'il y en a une, et ne produit que le déplacement de BackgroundImage de 125 unités vers le bas puis applique un flou. </desc> <feOffset in="BackgroundImage" dx="0" dy="125" /> <feGaussianBlur stdDeviation="8" /> </filter> <filter id="ArrPlanDeplaceFlou_sansSourceGraphic" filterUnits="userSpaceOnUse" x="0" y="0" width="1200" height="400"> <desc> Ce filtre prend BackgroundImage, le déplace de 125 unités vers le bas, applique un flou puis rend SourceGraphic par-dessus l'arrière-plan déplacé et flou. </desc> <feOffset in="BackgroundImage" dx="0" dy="125" /> <feGaussianBlur stdDeviation="8" result="blur" /> <feMerge> <feMergeNode in="blur"/> <feMergeNode in="SourceGraphic"/> </feMerge> </filter> </defs> <g transform="translate(0,0)"> <desc>La première image est le graphique de référence sans filtre.</desc> <rect x="25" y="25" width="100" height="100" fill="red"/> <g opacity=".5"> <circle cx="125" cy="75" r="45" fill="green"/> <polygon points="160,25 160,125 240,75" fill="blue"/> </g> <rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/> </g> <g enable-background="new" transform="translate(270,0)"> <desc>La deuxième ajoute un élément 'g' vide qui invoque ArrPlanDeplaceFlou.</desc> <rect x="25" y="25" width="100" height="100" fill="red"/> <g opacity=".5"> <circle cx="125" cy="75" r="45" fill="green"/> <polygon points="160,25 160,125 240,75" fill="blue"/> </g> <g filter="url(#ArrPlanDeplaceFlou)"/> <rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/> </g> <g enable-background="new" transform="translate(540,0)"> <desc>La troisième invoque ArrPlanDeplaceFlou sur le groupe interne.</desc> <rect x="25" y="25" width="100" height="100" fill="red"/> <g filter="url(#ArrPlanDeplaceFlou)" opacity=".5"> <circle cx="125" cy="75" r="45" fill="green"/> <polygon points="160,25 160,125 240,75" fill="blue"/> </g> <rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/> </g> <g enable-background="new" transform="translate(810,0)"> <desc>Le quatrième invoque ArrPlanDeplaceFlou sur le triangle.</desc> <rect x="25" y="25" width="100" height="100" fill="red"/> <g opacity=".5"> <circle cx="125" cy="75" r="45" fill="green"/> <polygon points="160,25 160,125 240,75" fill="blue" filter="url(#ArrPlanDeplaceFlou)"/> </g> <rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/> </g> <g enable-background="new" transform="translate(1080,0)"> <desc>Le cinquième invoque ArrPlanDeplaceFlou_sansSourceGraphic sur le triangle.</desc> <rect x="25" y="25" width="100" height="100" fill="red"/> <g opacity=".5"> <circle cx="125" cy="75" r="45" fill="green"/> <polygon points="160,25 160,125 240,75" fill="blue" filter="url(#ArrPlanDeplaceFlou_sansSourceGraphic)"/> </g> <rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/> </g> </svg>
![]() |
Voir cet exemple en SVG (seulement avec navigateur gérant SVG)
L'exemple ci-dessus se décompose en cinq parties, décrites comme suit :
Cette section décrit les diverses primitives de filtre pouvant être assemblées pour obtenir un effet de filtre particulier.
À moins d'être précisé autrement, tous les filtres d'image opèrent sur des échantillons RGBA prémultipliés. Les filtres dont l'action est plus naturelle sur des données non prémultipliées (feColorMatrix et feComponentTransfer) déferont temporairement puis referont une prémultiplication comme spécifié. Toutes les opérations d'effet de filtre pixélisé prennent en entrée 1 à N images RGBA, des attributs supplémentaires comme paramètres et produisent en sortie une seule image RGBA.
Le résultat RGBA de chaque primitive de filtre sera ramené dans les plages de valeurs de couleur et de valeurs d'opacité permises. Ainsi, par exemple, les valeurs de couleur ou d'opacité négatives seront ajustées sur une valeur de couleur/opacité de zéro dans le résultat d'une primitive de filtre donnée.
L'espace de couleur, dans lequel une primitive de filtre particulière opère, est déterminé par la valeur de la propriété 'color-interpolation-filters' sur la primitive de filtre en question. Une autre propriété 'color-interpolation' détermine l'espace de couleur pour d'autres opérations de couleur. Ces deux propriétés ayant des valeurs initiales différentes ('color-interpolation-filters' a une valeur initiale de linearRGB, alors que 'color-interpolation' a une valeur initiale de sRGB), dans certains cas où il faut obtenir des résultats particuliers (par exemple, pour la coordination d'une interpolation de dégradé et d'une opération de filtre), il sera nécessaire de spécifier explicitement la propriété 'color-interpolation' à linearRGB, ou la propriété 'color-interpolation-filters' à sRGB, sur des éléments particuliers. Remarquer que les exemples ci-dessous ne spécifient aucune valeur explicite pour l'une ou l'autre propriétés 'color-interpolation' et 'color-interpolation-filters', c'est ainsi leur valeur initiale qui s'applique.
Les attributs suivants sont disponibles pour toutes les primitives de filtre :
<!ENTITY % filter_primitive_attributes "x %Coordinate; #IMPLIED y %Coordinate; #IMPLIED width %Length; #IMPLIED height %Length; #IMPLIED result CDATA #IMPLIED" > <!ENTITY % filter_primitive_attributes_with_in "%filter_primitive_attributes; in CDATA #IMPLIED">
Définitions des attributs :
Toutes les primitives de filtre ont des attributs x, y, width et height qui identifient une sous-région où le calcul et le rendu de la primitive de filtre donnée se restreignent. Ces attributs sont définis en fonction des mêmes règles que pour les attributs de coordonnée et de longueur des autres primitives de filtre, ainsi ils représentent des valeurs dans le système de coordonnées établit par l'attribut primitiveUnits sur l'élément 'filter'.
Les attributs x, y, width et height se rabattent par défaut à l'union (i.e., la boîte englobante de logement la plus serrée) des sous-régions définies pour tous les nœuds appelés. S'il n'y a pas de nœuds appelés (par exemple, pour les primitives 'feImage' ou 'feTurbulence') ou si l'un ou plusieurs des nœuds appelés est une entrée standard (parmi SourceGraphic, SourceAlpha, BackgroundImage, BackgroundAlpha, FillPaint ou StrokePaint) ou si c'est la primitive 'feTile' (qui est particulière en ce sens que sa fonction principale consiste à répliquer le nœud appelé sur X et Y, produisant ainsi un résultat généralement plus grand), la sous-région par défaut est 0%,0%,100%,100%, où les pourcentages se rapportent aux dimensions de la région de filtre.
Les attributs x, y, width et height agissent comme un rectangle de rognage net.
Toutes les images intermédiaires hors-écran sont définies pour ne pas excéder l'intersection désignée par x, y, width et height avec la région de filtre. La région de filtre et toutes les sous-région x, y, width, height doivent être réglées de façon à ce que toutes les images hors-écran soient suffisamment grande pour accomoder tout pixel qui pourrait se trouver à l'intersection, même partiellement, soit de la région de filtre, soit des sous-régions x,y,width,height.
La primitive 'feTile' référence une primitive de filtre précédente, puis assemble les carreaux de mosaïque en fonction des valeurs des attributs x, y, width et height de la primitive de filtre appelée pour remplir sa propre sous-région de primitive de filtre.
Les sections suivantes définissent les élément qui décrivent une source lumineuse, à savoir 'feDistantLight', 'fePointLight' et 'feSpotLight', et la propriété 'lighting-color', qui définit la couleur de la lumière.
<!ELEMENT feDistantLight (animate|set)* > <!ATTLIST feDistantLight %stdAttrs; azimuth %Number; #IMPLIED elevation %Number; #IMPLIED > |
Définitions des attributs :
<!ELEMENT fePointLight (animate|set)* > <!ATTLIST fePointLight %stdAttrs; x %Number; #IMPLIED y %Number; #IMPLIED z %Number; #IMPLIED > |
Définitions des attributs :
<!ELEMENT feSpotLight (animate|set)* > <!ATTLIST feSpotLight %stdAttrs; x %Number; #IMPLIED y %Number; #IMPLIED z %Number; #IMPLIED pointsAtX %Number; #IMPLIED pointsAtY %Number; #IMPLIED pointsAtZ %Number; #IMPLIED specularExponent %Number; #IMPLIED limitingConeAngle %Number; #IMPLIED > |
Définitions des attributs :
La propriété 'lighting-color' définit la couleur de la source lumineuse pour les primitives de filtre 'feDiffuseLighting' et 'feSpecularLighting'.
Valeur : | currentColor | <couleur> [icc-color(<nom>[,<valeur-couleur-icc>]*)] | inherit vf. |
Valeur initiale : | white |
S'applique à : | ceux des éléments 'feDiffuseLighting' et 'feSpecularLighting' |
Héritée : | non |
Pourcentages : | sans objet |
Médias : | visuel |
Animatable: | oui |
Ce filtre compose deux objets à l'aide de modes de mélange couramment employés par les logiciels d'imagerie. Il effectue une combinaison au pixel de deux images en entrée.
<!ELEMENT feBlend (animate|set)* > <!ATTLIST feBlend %stdAttrs; %PresentationAttributes-FilterPrimitives; %filter_primitive_attributes_with_in; in2 CDATA #REQUIRED mode (normal | multiply | screen | darken | lighten) "normal" > |
Définitions des attributs :
Pour tous les modes de feBlend, l'opacité résultante se calcule comme suit :
qr = 1 - (1-qa)*(1-qb)
Voici les définitions qui s'appliquent aux formules de composition ci-dessous :
cr = Couleur résultante (RGB) - prémultipliée qa = Valeur d'opacité à un pixel donné pour l'image A qb = Valeur d'opacité à un pixel donné pour l'image B ca = Couleur (RGB) à un pixel donné pour l'image A - prémultipliée cb = Couleur (RGB) à un pixel donné pour l'image B - prémultipliée
Le tableau suivant donne la liste des modes de mélange d'images disponibles :
Mode de mélange d'images | Formule pour le calcul de la couleur résultante |
normal | cr = (1 - qa) * cb + ca |
multiply | cr = (1-qa)*cb + (1-qb)*ca + ca*cb |
screen | cr = cb + ca - ca * cb |
darken | cr = Min ((1 - qa) * cb + ca, (1 - qb) * ca + cb) |
lighten | cr = Max ((1 - qa) * cb + ca, (1 - qb) * ca + cb) |
Le mode de mélange 'normal' est équivalent à la spécification operator="over" sur la primitive de filtre 'feComposite', correspond à la méthode de mélange utilisée par l'élément 'feMerge' et correspond à la technique de composition alpha simple utilisée dans SVG pour toute composition en-dehors des effets de filtre.
L'exemple feBlend illustre les cinq modes de mélange.
<?xml version="1.0"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg width="5cm" height="5cm" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg"> <title>Exemple feBlend - les modes de mélange feBlend</title> <desc>Cinq chaînes textuelles mélangées à un dégradé, une chaîne pour chacun des modes de mélange de feBlend.</desc> <defs> <linearGradient id="MonDegrade" gradientUnits="userSpaceOnUse" x1="100" y1="0" x2="300" y2="0"> <stop offset="0" stop-color="#000000" /> <stop offset=".33" stop-color="#ffffff" /> <stop offset=".67" stop-color="#ff0000" /> <stop offset="1" stop-color="#808080" /> </linearGradient> <filter id="Normal"> <feBlend mode="normal" in2="BackgroundImage" in="SourceGraphic"/> </filter> <filter id="Multiply"> <feBlend mode="multiply" in2="BackgroundImage" in="SourceGraphic"/> </filter> <filter id="Screen"> <feBlend mode="screen" in2="BackgroundImage" in="SourceGraphic"/> </filter> <filter id="Darken"> <feBlend mode="darken" in2="BackgroundImage" in="SourceGraphic"/> </filter> <filter id="Lighten"> <feBlend mode="lighten" in2="BackgroundImage" in="SourceGraphic"/> </filter> </defs> <rect fill="none" stroke="blue" x="1" y="1" width="498" height="498"/> <g enable-background="new" > <rect x="100" y="20" width="300" height="460" fill="url(#MonDegrade)" /> <g font-family="Verdana" font-size="75" fill="#888888" fill-opacity=".6" > <text x="50" y="90" filter="url(#Normal)" >Normal</text> <text x="50" y="180" filter="url(#Multiply)" >Multiply</text> <text x="50" y="270" filter="url(#Screen)" >Screen</text> <text x="50" y="360" filter="url(#Darken)" >Darken</text> <text x="50" y="450" filter="url(#Lighten)" >Lighten</text> </g> </g> </svg>
![]() |
Voir cet exemple en SVG (seulement avec navigateur gérant SVG)
Ce filtre applique une matrice de transformation :
| R' | | a00 a01 a02 a03 a04 | | R | | G' | | a10 a11 a12 a13 a14 | | G | | B' | = | a20 a21 a22 a23 a24 | * | B | | A' | | a30 a31 a32 a33 a34 | | A | | 1 | | 0 0 0 0 1 | | 1 |
sur les valeurs de couleur et alpha RGBA de chaque pixel du graphique en entrée pour produire un résultat avec un nouveau jeu de valeurs de couleur et alpha RGBA.
Les calculs s'effectuent sur des valeurs de couleurs non prémultipliées. Si le graphique en entrée consiste en valeurs de couleur prémultipliées, celles-ci sont automatiquement converties en valeurs non prémultipliées pour cette opération.
Ces matrices effectuent souvent une correspondance à l'identique dans le canal alpha. Auquel cas, une implémentation peut éviter le coûteux défaire et refaire de la prémultiplication en donnant à tous les pixels une valeur A=1.
<!ELEMENT feColorMatrix (animate|set)* > <!ATTLIST feColorMatrix %stdAttrs; %PresentationAttributes-FilterPrimitives; %filter_primitive_attributes_with_in; type (matrix | saturate | hueRotate | luminanceToAlpha) "matrix" values CDATA #IMPLIED > |
Définitions des attributs :
type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"
| R' | |0.213+0.787s 0.715-0.715s 0.072-0.072s 0 0 | | R | | G' | |0.213-0.213s 0.715+0.285s 0.072-0.072s 0 0 | | G | | B' | = |0.213-0.213s 0.715-0.715s 0.072+0.928s 0 0 | * | B | | A' | | 0 0 0 1 0 | | A | | 1 | | 0 0 0 0 1 | | 1 |
| R' | | a00 a01 a02 0 0 | | R | | G' | | a10 a11 a12 0 0 | | G | | B' | = | a20 a21 a22 0 0 | * | B | | A' | | 0 0 0 1 0 | | A | | 1 | | 0 0 0 0 1 | | 1 |dans laquelle les termes a00, a01, etc. se calcule comme suit :
| a00 a01 a02 | [+0.213 +0.715 +0.072] | a10 a11 a12 | = [+0.213 +0.715 +0.072] + | a20 a21 a22 | [+0.213 +0.715 +0.072] [+0.787 -0.715 -0.072] cos(valeur hueRotate) * [-0.213 +0.285 -0.072] + [-0.213 -0.715 +0.928] [-0.213 -0.715+0.928] sin(valeur hueRotate) * [+0.143 +0.140-0.283] [-0.787 +0.715+0.072]Ainsi, le terme supérieur gauche de la matrice hueRotate revient à :
.213 + cos(valeur hueRotate)*.787 - sin(valeur hueRotate)*.213
| R' | | 0 0 0 0 0 | | R | | G' | | 0 0 0 0 0 | | G | | B' | = | 0 0 0 0 0 | * | B | | A' | | 0.2125 0.7154 0.0721 0 0 | | A | | 1 | | 0 0 0 0 1 | | 1 |
L'exemple feColorMatrix illustre les quatre types d'opérations de feColorMatrix.
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="8cm" height="5cm" viewBox="0 0 800 500"
xmlns="http://www.w3.org/2000/svg">
<title>Exemple feColorMatrix - les opérations de feColorMatrix</title>
<desc>Cinq chaînes textuelles montre les effets de feColorMatrix:
- une chaîne textuelle non filtrée qui est la référence ;
- l'option matrix de feColorMatrix pour une conversion en niveaux de gris ;
- l'option saturate de feColorMatrix ;
- l'option hueRotate de feColorMatrix ;
- l'option luminanceToAlpha de feColorMatrix.</desc>
<defs>
<linearGradient id="MonDegrade" gradientUnits="userSpaceOnUse"
x1="100" y1="0" x2="500" y2="0">
<stop offset="0" stop-color="#ff00ff" />
<stop offset=".33" stop-color="#88ff88" />
<stop offset=".67" stop-color="#2020ff" />
<stop offset="1" stop-color="#d00000" />
</linearGradient>
<filter id="Matrix" filterUnits="objectBoundingBox"
x="0%" y="0%" width="100%" height="100%">
<feColorMatrix type="matrix" in="SourceGraphic"
values=".33 .33 .33 0 0
.33 .33 .33 0 0
.33 .33 .33 0 0
.33 .33 .33 0 0"/>
</filter>
<filter id="Saturate40" filterUnits="objectBoundingBox"
x="0%" y="0%" width="100%" height="100%">
<feColorMatrix type="saturate" in="SourceGraphic" values="40%"/> « errata 2002-11-15 »
</filter>
<filter id="HueRotate90" filterUnits="objectBoundingBox"
x="0%" y="0%" width="100%" height="100%">
<feColorMatrix type="hueRotate" in="SourceGraphic" values="90"/>
</filter>
<filter id="LuminanceToAlpha" filterUnits="objectBoundingBox"
x="0%" y="0%" width="100%" height="100%">
<feColorMatrix type="luminanceToAlpha" in="SourceGraphic" result="a"/>
<feComposite in="SourceGraphic" in2="a" operator="in" />
</filter>
</defs>
<rect fill="none" stroke="blue"
x="1" y="1" width="798" height="498"/>
<g font-family="Verdana" font-size="75"
font-weight="bold" fill="url(#MonDegrade)" >
<rect x="100" y="0" width="500" height="20" />
<text x="100" y="90">Pas de filtre</text>
<text x="100" y="190" filter="url(#Matrix)" >Matrix</text>
<text x="100" y="290" filter="url(#Saturate40)" >Saturate</text>
<text x="100" y="390" filter="url(#HueRotate90)" >HueRotate</text>
<text x="100" y="490" filter="url(#LuminanceToAlpha)" >Luminance</text>
</g>
</svg>
![]() |
Voir cet exemple en SVG (seulement avec navigateur gérant SVG)
Cette primitive de filtre élabore une nouvelle carte des données, selon la composante et pour chaque pixel, comme suit :
R' = feFuncR( R ) G' = feFuncG( G ) B' = feFuncB( B ) A' = feFuncA( A )
Elle autorise des opérations comme l'ajustement de la luminosité, du contraste, de l'équilibre des couleurs ou du seuil.
Les calculs s'effectue sur des valeurs de couleur non prémultipliées. Si le graphique en entrée consiste en valeurs de couleur prémultipliées, celles-ci sont automatiquement converties en valeurs de couleur non prémultipliées pour cette opération. (Remarquer que le défaire et le refaire de la prémultiplication peuvent être évités si la composante feFuncA est la transformation à l'identique et si toutes les valeurs alpha du graphique source sont mises à 1).
<!ELEMENT feComponentTransfer (feFuncR?,feFuncG?,feFuncB?,feFuncA?) > <!ATTLIST feComponentTransfer %stdAttrs; %PresentationAttributes-FilterPrimitives; %filter_primitive_attributes_with_in; > <!ENTITY % component_transfer_function_attributes "type (identity | table | discrete | linear | gamma) #REQUIRED tableValues CDATA #IMPLIED slope %Number; #IMPLIED intercept %Number; #IMPLIED amplitude %Number; #IMPLIED exponent %Number; #IMPLIED offset %Number; #IMPLIED" > <!ELEMENT feFuncR (animate|set)* > <!ATTLIST feFuncR %stdAttrs; %component_transfer_function_attributes; > <!ELEMENT feFuncG (animate|set)* > <!ATTLIST feFuncG %stdAttrs; %component_transfer_function_attributes; > <!ELEMENT feFuncB (animate|set)* > <!ATTLIST feFuncB %stdAttrs; %component_transfer_function_attributes; > <!ELEMENT feFuncA (animate|set)* > <!ATTLIST feFuncA %stdAttrs; %component_transfer_function_attributes; > |
Les attributs ci-dessous s'appliquent aux sous-éléments 'feFuncR', 'feFuncG', 'feFuncB' et 'feFuncA' qui définissent les fonctions de transfert.
Définitions des attributs :
Indique le type de la fonction de transfert de la composante. Le type de la fonction détermine l'application, ou non, des autres attributs.
C' = C
Soit une valeur C
, prendre un k
tel que :
k/N <= C < (k+1)/N
Le résultat C'
est donné par :
C' = vk + (C - k/N)*N * (vk+1 - vk)
Soit une valeur C
, prendre un k
tel que :
k/N <= C < (k+1)/N
Le résultat C'
est donné par :
C' = vk
L'exemple feComponentTransfer illustre les quatre types d'opération de feComponentTransfer.
<?xml version="1.0"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg width="8cm" height="4cm" viewBox="0 0 800 400" xmlns="http://www.w3.org/2000/svg"> <title>Exemple feComponentTransfer - les opérations de feComponentTransfer</title> <desc>Quatre chaînes textuelles montrant les effets de feComponentTransfer : une fonction identité qui est la référence ; l'option table de feComponentTransfer ; l'option linear de feComponentTransfer ; l'option gamma de feComponentTransfer.</desc> <defs> <linearGradient id="MonDegrade" gradientUnits="userSpaceOnUse" x1="100" y1="0" x2="600" y2="0"> <stop offset="0" stop-color="#ff0000" /> <stop offset=".33" stop-color="#00ff00" /> <stop offset=".67" stop-color="#0000ff" /> <stop offset="1" stop-color="#000000" /> </linearGradient> <filter id="Identity" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%"> <feComponentTransfer> <feFuncR type="identity"/> <feFuncG type="identity"/> <feFuncB type="identity"/> <feFuncA type="identity"/> </feComponentTransfer> </filter> <filter id="Table" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%"> <feComponentTransfer> <feFuncR type="table" tableValues="0 0 1 1"/> <feFuncG type="table" tableValues="1 1 0 0"/> <feFuncB type="table" tableValues="0 1 1 0"/> </feComponentTransfer> </filter> <filter id="Linear" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%"> <feComponentTransfer> <feFuncR type="linear" slope=".5" intercept=".25"/> <feFuncG type="linear" slope=".5" intercept="0"/> <feFuncB type="linear" slope=".5" intercept=".5"/> </feComponentTransfer> </filter> <filter id="Gamma" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%"> <feComponentTransfer> <feFuncR type="gamma" amplitude="2" exponent="5" offset="0"/> <feFuncG type="gamma" amplitude="2" exponent="3" offset="0"/> <feFuncB type="gamma" amplitude="2" exponent="1" offset="0"/> </feComponentTransfer> </filter> </defs> <rect fill="none" stroke="blue" x="1" y="1" width="798" height="398"/> <g font-family="Verdana" font-size="75" font-weight="bold" fill="url(#MonDegrade)" > <rect x="100" y="0" width="600" height="20" /> <text x="100" y="90">Identité</text> <text x="100" y="190" filter="url(#Table)" >TableIndexée</text> <text x="100" y="290" filter="url(#Linear)" >FonctLinéaire</text> <text x="100" y="390" filter="url(#Gamma)" >FonctGamma</text> </g> </svg>
![]() |
Voir cet exemple en SVG (seulement avec navigateur gérant SVG)
Ce filtre combine les deux images en entrée, au niveau du pixel dans l'espace de l'image, en utilisant l'une des opérations de composition Porter-Duff [PORTERDUFF] : over, in, atop, out, xor. En complément, on peut appliquer une opération arithmetic au niveau de la composante (le résultat étant ramené dans une plage [0,...,1]).
L'opération arithmetic se révèle utile lors de la combinaison des sorties des filtres 'feDiffuseLighting' ou 'feSpecularLighting' avec des données de texture. Elle est également utile pour implémenter une dissolution. Si l'opération arithmetic est choisie, chaque pixel résultat est calculé suivant les formules suivantes :
résultat = k1*i1*i2 + k2*i1 + k3*i2 + k4
Pour cette primitive de filtre, l'étendue de l'image résultante peut croître comme indiqué dans la section La sous-région de primitive de filtre.
<!ELEMENT feComposite (animate|set)* > <!ATTLIST feComposite %stdAttrs; %PresentationAttributes-FilterPrimitives; %filter_primitive_attributes_with_in; in2 CDATA #REQUIRED operator (over | in | out | atop | xor | arithmetic) "over" k1 %Number; #IMPLIED k2 %Number; #IMPLIED k3 %Number; #IMPLIED k4 %Number; #IMPLIED > |
Définitions des attributs :
L'exemple feComposite illustre les six types d'opération de feComposite. Il montre également deux techniques différentes d'utilisation de la valeur BackgroundImage comme faisant partie de l'opération de composition.
Les deux premières rangées rendent des triangles bleuâtres dans l'arrière-plan. On applique un filtre qui compose les triangles rougeâtres sur les triangles bleuâtres, en utilisant l'une des opérations de composition. Le résultat de la composition est dessiné sur une surface blanche opaque temporaire qui est ensuite rendu sur le canevas. (La surface blanche opaque temporaire oblitère le triangle bleuâtre original).
Les deux dernières rangées applique les mêmes opérations de composition de triangles rougeâtres sur des triangles bleuâtres. Cependant, le résultat de la composition est directement mélangé au canevas (on n'utilise pas la technique avec la surface blanche opaque temporaire). Pour certains cas, les résultats sont différents de ceux qu'on obtient avec une surface blanche opaque temporaire. Le triangle bleuâtre original de l'arrière-plan transparaît là où l'opération de composition aboutit à un pixel complètement transparent. Dans d'autres cas, le résultat de la composition est mélangé au triangle bleuâtre, ce qui résulte en une valeur de couleur finale différente.
<?xml version="1.0"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg width="330" height="195" viewBox="0 0 1100 650" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>Exemple feComposite - exemples d'opérations de feComposite</title> <desc>Quatre rangées de six paires de triangles se chevauchant illustrent les six opérateurs différents de feComposite avec différentes valeurs d'opacité et compensations de l'arrière-plan.</desc> <defs> <desc>Définit deux jeux de six filtres pour chacun des six opérateurs de composition. Le premier jeu efface l'image d'arrière-plan en la recouvrant de blanc opaque. Le second jeu n'efface pas l'arrière-plan, ce qui fait que l'arrière-plan transparaît parfois et, d'autres fois, se mélange avec lui-même (i.e., "double application").</desc> <filter id="overFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"> <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/> <feComposite in="SourceGraphic" in2="BackgroundImage" operator="over" result="composit"/> <feMerge> <feMergeNode in="flood"/> <feMergeNode in="composit"/> </feMerge> </filter> <filter id="inFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"> <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/> <feComposite in="SourceGraphic" in2="BackgroundImage" operator="in" result="composit"/> <feMerge> <feMergeNode in="flood"/> <feMergeNode in="composit"/> </feMerge> </filter> <filter id="outFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"> <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/> <feComposite in="SourceGraphic" in2="BackgroundImage" operator="out" result="composit"/> <feMerge> <feMergeNode in="flood"/> <feMergeNode in="composit"/> </feMerge> </filter> <filter id="atopFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"> <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/> <feComposite in="SourceGraphic" in2="BackgroundImage" operator="atop" result="composit"/> <feMerge> <feMergeNode in="flood"/> <feMergeNode in="composit"/> </feMerge> </filter> <filter id="xorFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"> <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/> <feComposite in="SourceGraphic" in2="BackgroundImage" operator="xor" result="composit"/> <feMerge> <feMergeNode in="flood"/> <feMergeNode in="composit"/> </feMerge> </filter> <filter id="arithmeticFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"> <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/> <feComposite in="SourceGraphic" in2="BackgroundImage" result="composit" operator="arithmetic" k1=".5" k2=".5" k3=".5" k4=".5"/> <feMerge> <feMergeNode in="flood"/> <feMergeNode in="composit"/> </feMerge> </filter> <filter id="overNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"> <feComposite in="SourceGraphic" in2="BackgroundImage" operator="over" result="composit"/> </filter> <filter id="inNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"> <feComposite in="SourceGraphic" in2="BackgroundImage" operator="in" result="composit"/> </filter> <filter id="outNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"> <feComposite in="SourceGraphic" in2="BackgroundImage" operator="out" result="composit"/> </filter> <filter id="atopNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"> <feComposite in="SourceGraphic" in2="BackgroundImage" operator="atop" result="composit"/> </filter> <filter id="xorNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"> <feComposite in="SourceGraphic" in2="BackgroundImage" operator="xor" result="composit"/> </filter> <filter id="arithmeticNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"> <feComposite in="SourceGraphic" in2="BackgroundImage" result="composit" operator="arithmetic" k1=".5" k2=".5" k3=".5" k4=".5"/> </filter> <path id="Bleu100" d="M 0 0 L 100 0 L 100 100 z" fill="#00ffff" /> <path id="Rouge100" d="M 0 0 L 0 100 L 100 0 z" fill="#ff00ff" /> <path id="Bleu50" d="M 0 125 L 100 125 L 100 225 z" fill="#00ffff" fill-opacity=".5" /> <path id="Rouge50" d="M 0 125 L 0 225 L 100 125 z" fill="#ff00ff" fill-opacity=".5" /> <g id="DeuxTrianglesBleus"> <use xlink:href="#Bleu100"/> <use xlink:href="#Bleu50"/> </g> <g id="BlueTriangles"> <use transform="translate(275,25)" xlink:href="#DeuxTrianglesBleus"/> <use transform="translate(400,25)" xlink:href="#DeuxTrianglesBleus"/> <use transform="translate(525,25)" xlink:href="#DeuxTrianglesBleus"/> <use transform="translate(650,25)" xlink:href="#DeuxTrianglesBleus"/> <use transform="translate(775,25)" xlink:href="#DeuxTrianglesBleus"/> <use transform="translate(900,25)" xlink:href="#DeuxTrianglesBleus"/> </g> </defs> <rect fill="none" stroke="blue" x="1" y="1" width="1098" height="648"/> <g font-family="Verdana" font-size="40" shape-rendering="crispEdges"> <desc>Rend les exemples en utilisant les filtres qui dessinent une surface blanche opaque par-dessus, oblitérant ainsi l'arrière-plan.</desc> <g enable-background="new"> <text x="15" y="75">opacité 1.0</text> <text x="15" y="115" font-size="27">(avec feFlood)</text> <text x="15" y="200">opacité 0.5</text> <text x="15" y="240" font-size="27">(avec feFlood)</text> <use xlink:href="#BlueTriangles"/> <g transform="translate(275,25)"> <use xlink:href="#Rouge100" filter="url(#overFlood)" /> <use xlink:href="#Rouge50" filter="url(#overFlood)" /> <text x="5" y="275">over</text> </g> <g transform="translate(400,25)"> <use xlink:href="#Rouge100" filter="url(#inFlood)" /> <use xlink:href="#Rouge50" filter="url(#inFlood)" /> <text x="35" y="275">in</text> </g> <g transform="translate(525,25)"> <use xlink:href="#Rouge100" filter="url(#outFlood)" /> <use xlink:href="#Rouge50" filter="url(#outFlood)" /> <text x="15" y="275">out</text> </g> <g transform="translate(650,25)"> <use xlink:href="#Rouge100" filter="url(#atopFlood)" /> <use xlink:href="#Rouge50" filter="url(#atopFlood)" /> <text x="10" y="275">atop</text> </g> <g transform="translate(775,25)"> <use xlink:href="#Rouge100" filter="url(#xorFlood)" /> <use xlink:href="#Rouge50" filter="url(#xorFlood)" /> <text x="15" y="275">xor</text> </g> <g transform="translate(900,25)"> <use xlink:href="#Rouge100" filter="url(#arithmeticFlood)" /> <use xlink:href="#Rouge50" filter="url(#arithmeticFlood)" /> <text x="-25" y="275">arithmetic</text> </g> </g> <g transform="translate(0,325)" enable-background="new"> <desc>Rend les exemples en utilisant les filtres qui n'oblitèrent pas l'arrière-plan, ainsi celui-ci peut parfois continuer de transparaître comme parfois l'image d'arrière-plan peut se mélanger avec elle-même ("double application").</desc> <text x="15" y="75">opacité 1.0</text> <text x="15" y="115" font-size="27">(sans feFlood)</text> <text x="15" y="200">opacité 0.5</text> <text x="15" y="240" font-size="27">(sans feFlood)</text> <use xlink:href="#BlueTriangles"/> <g transform="translate(275,25)"> <use xlink:href="#Rouge100" filter="url(#overNoFlood)" /> <use xlink:href="#Rouge50" filter="url(#overNoFlood)" /> <text x="5" y="275">over</text> </g> <g transform="translate(400,25)"> <use xlink:href="#Rouge100" filter="url(#inNoFlood)" /> <use xlink:href="#Rouge50" filter="url(#inNoFlood)" /> <text x="35" y="275">in</text> </g> <g transform="translate(525,25)"> <use xlink:href="#Rouge100" filter="url(#outNoFlood)" /> <use xlink:href="#Rouge50" filter="url(#outNoFlood)" /> <text x="15" y="275">out</text> </g> <g transform="translate(650,25)"> <use xlink:href="#Rouge100" filter="url(#atopNoFlood)" /> <use xlink:href="#Rouge50" filter="url(#atopNoFlood)" /> <text x="10" y="275">atop</text> </g> <g transform="translate(775,25)"> <use xlink:href="#Rouge100" filter="url(#xorNoFlood)" /> <use xlink:href="#Rouge50" filter="url(#xorNoFlood)" /> <text x="15" y="275">xor</text> </g> <g transform="translate(900,25)"> <use xlink:href="#Rouge100" filter="url(#arithmeticNoFlood)" /> <use xlink:href="#Rouge50" filter="url(#arithmeticNoFlood)" /> <text x="-25" y="275">arithmetic</text> </g> </g> </g> </svg>
![]() |
Voir cet exemple en SVG (seulement avec navigateur gérant SVG)
La primitive feConvolveMatrix applique une matrice de convolution d'effet de filtre. Une convolution combine les pixels de l'image en entrée avec ceux voisins pour donner une image résultante. On peut obtenir une grande variété d'opérations d'imagerie à l'aide de convolutions, dont le flou, la détection de bord, la netteté, l'estampage et le chanfreinage.
Une convolution de matrice se fonde sur une matrice n par m (le noyau de convolution), qui décrit la façon dont une valeur de pixel donné de l'image en entrée est combinée avec celles des pixels de son voisinage pour aboutir à une valeur de pixel résultante. Chaque pixel du résultat est déterminé par l'application de la matrice noyau sur le pixel source correspondant et ses pixels voisins. La formule de convolution de base, appliquée à chaque valeur de couleur d'un pixel donné, est :
RESULTX,Y = (
SUMI=0 to [orderY-1] {
SUMJ=0 to [orderX-1] {
SOURCEX-targetX+J, Y-targetY+I * kernelMatrixorderX-J-1, orderY-I-1
}
}
) / divisor + bias
dans laquelle "orderX" et "orderY" représentent les valeurs X et Y pour l'attribut order, "targetX" représente la valeur de l'attribut targetX, "targetY" la valeur de l'attribut targetY, "kernelMatrix" celle de l'attribut kernelMatrix, "divisor" celle de l'attribut divisor et "bias" la valeur de l'attribut bias.
Remarquer dans la formule ci-dessus que les valeurs de la matrice noyau sont appliquées de telle manière que cette matrice noyau soit tournée de 180 degrés par rapport aux images de source et de destination, pour correspondre avec la théorie de la convolution telle qu'elle est décrite dans de nombreux ouvrages sur l'infographie.
En illustration, supposons que l'on ait une image en entrée, de 5x5 pixels, dont les valeurs de couleur pour l'un des canaux de couleur sont les suivantes :
0 20 40 235 235 100 120 140 235 235 200 220 240 235 235 225 225 255 255 255 225 225 255 255 255
supposons que l'on définisse un noyau de convolution de 3 par 3 comme ceci :
1 2 3 4 5 6 7 8 9
Examinons la valeur de couleur de la deuxième rangée deuxième colonne de l'image (la valeur du pixel source est 120). En supposons le cas le plus simple (quand le quadrillage de pixels de l'image source s'aligne parfaitement avec celui du noyau) et en supposons les valeurs par défaut des attributs divisor, targetX et targetY, alors la valeur de couleur résultange sera :
(9* 0 + 8* 20 + 7* 40 + 6*100 + 5*120 + 4*140 + 3*200 + 2*220 + 1*240) / (9+8+7+6+5+4+3+2+1)
Comme elles opèrent sur des pixels, les matrices de convolution sont de manière inhérente dépendantes de la résolution. Pour que la primitive 'feConvolveMatrix donne un résultat indépendamment de la résolution, il faut fournir une valeur explicite à l'attribut filterRes sur l'élément 'filter' et/ou bien à l'attribut kernelUnitLength.
L'attribut kernelUnitLength, conjugué aux autres attributs, définit un quadrillage de pixel dans le système de coordonnées de l'effet de filtre (i.e., le système de coordonnées établi par l'attribut primitiveUnits). Si le quadrillage de pixels établi par l'attribut kernelUnitLength n'est pas ajusté pour correspondre avec celui établi par l'attribut filterRes (implicitement ou explicitement), alors l'image en entrée sera temporairement réajustée pour faire correspondre ses pixels avec ceux établis par l'attribut kernelUnitLength. La convolution survient sur l'image re-échantillonnée. Après l'application de la convolution, l'image est re-échantillonnée en retour vers sa résolution originale.
Quand l'image doit être re-échantillonnée pour correspondre avec le système de coordonnées défini par l'attribut kernelUnitLength, préalablement à la convolution, ou bien re-échantillonnée pour correspondre au système de coordonnées de l'appareil, après la convolution, on recommande que les visionneurs de haute qualité fassent appel à des techniques d'interpolation adéquates, par exemple celles bilinéaires ou bicubiques. En fonction de la rapidité des interpolations disponibles, ce choix peut être affecté par le paramétrage de la propriété 'image-rendering'. Remarquer que les implémentations peuvent suivre des approches qui minimisent ou éliminent le re-échantillonnage, quand ce n'est pas indispensable pour obtenir un résultat correct, comme quand le document est zoomé en inverse et ainsi la valeur de l'attribut kernelUnitLength est considérablement plus petite que celle d'un pixel appareil.
<!ELEMENT feConvolveMatrix (animate|set)* > <!ATTLIST feConvolveMatrix %stdAttrs; %PresentationAttributes-FilterPrimitives; %filter_primitive_attributes_with_in; order %NumberOptionalNumber; #REQUIRED kernelMatrix CDATA #REQUIRED divisor %Number; #IMPLIED bias %Number; #IMPLIED targetX %Integer; #IMPLIED targetY %Integer; #IMPLIED edgeMode (duplicate|wrap|none) "duplicate" kernelUnitLength %NumberOptionalNumber; #IMPLIED preserveAlpha %Boolean; #IMPLIED > |
Définitions des attributs :
Détermine l'extension nécessaire de l'image en entrée avec des valeurs de couleur, de manière à ce que les opérations de matrice puissent s'effectuer quand le noyau est positionné sur ou près du bord de l'image en entrée.
La valeur "duplicate" signifie que l'image en entrée est étendue autant que nécessaire sur chacun de ses bords en dupliquant les valeurs de couleur du bord en question de l'image en entrée.
Image originale N par M, où m = M-1 et n = N-1 : 11 12 ... 1m 1M 21 22 ... 2m 2M .. .. ... .. .. n1 n2 ... nm nM N1 N2 ... Nm NM Étendue de deux pixels avec "duplicate" : 11 11 11 12 ... 1m 1M 1M 1M 11 11 11 12 ... 1m 1M 1M 1M 11 11 11 12 ... 1m 1M 1M 1M 21 21 21 22 ... 2m 2M 2M 2M .. .. .. .. ... .. .. .. .. n1 n1 n1 n2 ... nm nM nM nM N1 N1 N1 N2 ... Nm NM NM NM N1 N1 N1 N2 ... Nm NM NM NM N1 N1 N1 N2 ... Nm NM NM NM
La valeur "wrap" signifie que l'image en entrée est étendue en prenant les valeurs de couleur des bords opposés de l'image.
Étendue de deux pixels avec "wrap" : nm nM n1 n2 ... nm nM n1 n2 Nm NM N1 N2 ... Nm NM N1 N2 1m 1M 11 12 ... 1m 1M 11 12 2m 2M 21 22 ... 2m 2M 21 22 .. .. .. .. ... .. .. .. .. nm nM n1 n2 ... nm nM n1 n2 Nm NM N1 N2 ... Nm NM N1 N2 1m 1M 11 12 ... 1m 1M 11 12 2m 2M 21 22 ... 2m 2M 21 22
La valeur "none" signifie que l'image en entrée est étendue en prenant des valeurs de pixel de zéro pour R, G, B et A.
Animable : oui.
Cette primitive de filtre éclaire une image en utilisant le canal alpha comme placage de relief. Le résultat est une image RGBA opaque basée sur la couleur de la lumière avec partout une valeur alpha de "1.0". Le calcul de l'éclairage emploie la composante diffuse standard du modèle d'éclairage de Phong. L'image résultante dépend de la couleur de la lumière, de la position du projecteur et de la géométrie de la surface du placage de relief en entrée.
La carte de lumière produite par cette primitive de filtre peut se combiner avec une image de texture en utilisant le terme de multiplication de la méthode de composition arithmetic du filtre 'feComposite'. On peut simuler plusieurs sources lumineuses en réunissant plusieurs de ces cartes de lumière avant de les soumettre à l'image de texture.
Les formules ci-dessous emploient des filtres 3x3. Comme ils opèrent sur des pixels, de tels filtres sont de façon inhérente dépendants de la résolution. Because they operate on pixels, such filters are inherently resolution-dependent. Pour que la primitive 'feDiffuseLighting donne un résultat indépendamment de la résolution, il faut fournir une valeur explicite à l'attribut filterRes sur l'élément 'filter' et/ou bien à l'attribut kernelUnitLength.
L'attribut kernelUnitLength, conjugué aux autres attributs, définit un quadrillage de pixel dans le système de coordonnées de l'effet de filtre (i.e., le système de coordonnées établi par l'attribut primitiveUnits). Si le quadrillage de pixels établi par l'attribut kernelUnitLength n'est pas ajusté pour correspondre avec celui établi par l'attribut filterRes (implicitement ou explicitement), alors l'image en entrée sera temporairement réajustée pour faire correspondre ses pixels avec ceux établis par l'attribut kernelUnitLength. Les filtres 3x3 surviennent sur l'image re-échantillonnée. Après l'application du filtre, l'image est re-échantillonnée en retour vers sa résolution originale.
Quand l'image doit être re-échantillonnée, on recommande que les visionneurs de haute qualité fassent appel à des techniques d'interpolation adéquates, par exemple celles bilinéaires ou bicubiques. En fonction de la rapidité des interpolations disponibles, ce choix peut être affecté par le paramétrage de la propriété 'image-rendering'. Remarquer que les implémentations peuvent suivre des approches qui minimisent ou éliminent le re-échantillonnage, quand ce n'est pas indispensable pour obtenir un résultat correct, comme quand le document est zoomé en inverse et ainsi la valeur de l'attribut kernelUnitLength est considérablement plus petite que celle d'un pixel appareil.
Pour les formules qui suivent, on définit la fonction Norm(Ax,Ay,Az)
par :
Norm(Ax,Ay,Az) = sqrt(Ax^2+Ay^2+Az^2)
L'image RGBA résultante est calculée comme suit :
Dr = kd * N.L * Lr
Dg = kd * N.L * Lg
Db = kd * N.L * Lb
Da = 1.0
dans laquelle formule :
N est une fonction de x et y qui dépend du dégradé de la surface comme suit :
La surface décrite par l'image alpha en entrée Ain (x,y) est :
Z (x,y) = surfaceScale * Ain (x,y)
Le vecteur normal à la surface est calculé en utilisant le filtre 3x3 de dégradé Sobel. On utilise différents noyaux de filtre selon que le pixel donné se trouve à l'intérieur ou au bord. Pour chaque cas, la formule est :
Nx (x,y)= - surfaceScale * FACTORx *
(Kx(0,0)*I(x-dx,y-dy) + Kx(1,0)*I(x,y-dy) + Kx(2,0)*I(x+dx,y-dy) +
Kx(0,1)*I(x-dx,y) + Kx(1,1)*I(x,y) + Kx(2,1)*I(x+dx,y) +
Kx(0,2)*I(x-dx,y+dy) + Kx(1,2)*I(x,y+dy) + Kx(2,2)*I(x+dx,y+dy))
Ny (x,y)= - surfaceScale * FACTORy *
(Ky(0,0)*I(x-dx,y-dy) + Ky(1,0)*I(x,y-dy) + Ky(2,0)*I(x+dx,y-dy) +
Ky(0,1)*I(x-dx,y) + Ky(1,1)*I(x,y) + Ky(2,1)*I(x+dx,y) +
Ky(0,2)*I(x-dx,y+dy) + Ky(1,2)*I(x,y+dy) + Ky(2,2)*I(x+dx,y+dy))
Nz (x,y) = 1.0
N = (Nx, Ny, Nz) / Norm((Nx,Ny,Nz))
Dans ces formules, les valeurs dx
et dy
(par exemple, I(x-dx,y-dy)
), représentent
les deltas relatifs à une position (x,y)
donnée, pour l'estimation de la pente de la surface
en ce point. Ces deltas sont déterminés par la valeur (explicite ou implicite) de l'attribut
kernelUnitLength.
Coin supérieur gauche : FACTORx=2/(3*dx) |
Rangée supérieure : FACTORx=1/(3*dx) |
Coin supérieur droit : FACTORx=2/(3*dx) |
Colonne de gauche : FACTORx=1/(2*dx) |
Pixels intérieurs : FACTORx=1/(4*dx) |
Colonne de droite : FACTORx=1/(2*dx) |
Coin inférieur gauche : FACTORx=2/(3*dx) |
Rangée inférieure : FACTORx=1/(3*dx) |
Coin inférieur droit : FACTORx=2/(3*dx) |
L, le vecteur unitaire de l'échantillon d'image vers la lumière, se calcule comme suit :
Pour les sources lumineuses infinies, il est constant :
Lx = cos(azimuth)*cos(elevation)
Ly = sin(azimuth)*cos(elevation)
Lz = sin(elevation)
Pour les éclairages ponctuels et spot, il est une fonction de position :
Lx = Lightx - x
Ly = Lighty - y
Lz = Lightz - Z(x,y)
L = (Lx, Ly, Lz) / Norm(Lx, Ly, Lz)
dans laquelle Lightx, Lighty et Lightz est la position de la lumière en entrée.
Lr,Lg,Lb, le vecteur de couleur de la lumière, est une fonction de position seulement dans le cas d'un éclairage spot :
Lr = Lightr*pow((-L.S),specularExponent)
Lg = Lightg*pow((-L.S),specularExponent)
Lb = Lightb*pow((-L.S),specularExponent)
dans laquelle S est le vecteur unitaire allant de la lumière vers le point (pointsAtX, pointsAtY, pointsAtZ) dans le plan x-y :
Sx = pointsAtX - Lightx
Sy = pointsAtY - Lighty
Sz = pointsAtZ - Lightz
S = (Sx, Sy, Sz) / Norm(Sx, Sy, Sz)
Si L.S est positif, il n'y a pas de lumière. (Lr = Lg = Lb = 0)
<!ELEMENT feDiffuseLighting ((feDistantLight|fePointLight|feSpotLight),(animate|set|animateColor)*) > <!ATTLIST feDiffuseLighting %stdAttrs; class %ClassList; #IMPLIED style %StyleSheet; #IMPLIED %PresentationAttributes-Color; %PresentationAttributes-FilterPrimitives; %PresentationAttributes-LightingEffects; %filter_primitive_attributes_with_in; surfaceScale %Number; #IMPLIED diffuseConstant %Number; #IMPLIED kernelUnitLength %NumberOptionalNumber; #IMPLIED > |
Définitions des attributs :
dx
et dy
, respectivement, dans les
formules de calcul normales de surface. En spécifiant une ou des
valeurs pour l'attribut kernelUnitLength, le noyau devient défini dans un système
de coordonnées abstrait ajustable. Si kernelUnitLength n'est pas spécifié,
les valeurs de dx
et de dy
devraient représenter des deltas très petits par rapport
à une position (x,y)
donnée, ce qui pourrait être implémenté dans certains cas
par un pixel dans l'image intermédiaire hors-écran pixélisée, qui est un système de coordonnées
basé sur des pixels et qui est ainsi potentiellement non ajustable. Pour une certaine cohérence entre médias
d'affichage et agents utilisateurs, il est nécessaire que soit fournie une valeur pour au moins l'un des attributs
filterRes et kernelUnitLength. Les considérations sur
les images intermédiaires se trouvent dans la section Introduction et dans la
description de l'attribut filterRes. La source lumineuse est définie par l'un des éléments enfants 'feDistantLight', 'fePointLight' ou 'feSpotLight'. La couleur de lumière est spécifiée par la propriété 'lighting-color'.
Cette primitive de filtre utilise les valeurs des pixels de l'image en entrée de l'attribut in2 pour déplacer spatialement l'image en entrée de l'attribut in. Voici la transformation qui doit être effectuée :
P'(x,y) <- P( x + scale * ((XC(x,y) - .5), y + scale * (YC(x,y) - .5))
dans laquelle P(x,y) est l'image en entrée de l'attribut in et P'(x,y) la destination. Les valeurs XC(x,y) et YC(x,y) sont les valeurs de composante désignées par les attributs xChannelSelector et yChannelSelector. Par exemple, pour utiliser la composante R de l'attribut in2 dans le contrôle du déplacement sur x et la composante G de in2 dans le contrôle sur y, paramétrer xChannelSelector à "R" et yChannelSelector à "G".
La carte du déplacement définit l'inverse de la correspondance effectuée.
Les calculs utilisant les valeurs de pixel de l'attribut in2 s'effectuent avec des valeurs de couleur non prémultipliées. Si l'image de l'attribut in2 consiste en valeurs de couleur prémultipliées, celles-ci sont automatiquement converties en valeurs de couleur non prémultipliée avant d'effectuer l'opération.
Ce filtre peut induire des effets arbitraires non localisés sur l'entrée qui peuvent demander un tampon conséquent dans le tunnel de traitement. Néanmoins, avec cette formulation, tout besoin de tampon temporaire peut être déterminé par l'attribut scale qui représente la portée maximale du déplacement dans x ou y.
Lors de l'application de ce filtre, la localisation du pixel source se partagera souvent entre plusieurs sources. Dans ce cas, on recommande que les visionneurs en haute qualité appliquent une interpolation à partir des pixels environnants, par exemple bilinéaire ou bicubique, plutôt que de simplement sélectionner le pixel source le plus proche. En fonction de la rapidité des interpolations disponibles, ce choix peut être affecté par le paramétrage de la propriété 'image-rendering'.
La propriété 'color-interpolation-filters' ne s'applique qu'à l'image source de l'attribut in2 et ne s'applique pas à l'image source de l'attribut in.
<!ELEMENT feDisplacementMap (animate|set)* > <!ATTLIST feDisplacementMap %stdAttrs; %PresentationAttributes-FilterPrimitives; %filter_primitive_attributes_with_in; in2 CDATA #REQUIRED scale %Number; #IMPLIED xChannelSelector (R | G | B | A) "A" yChannelSelector (R | G | B | A) "A" > |
Définitions des attributs :
Cette primitive de filtre crée un rectangle rempli selon les valeurs de couleur et d'opacité des propriétés 'flood-color' et 'flood-opacity'. Le rectangle est aussi grand que la sous-région de primitive de filtre établie par les attributs x, y, width et height sur l'élément 'feFlood'.
<!ELEMENT feFlood (animate|set|animateColor)* > <!ATTLIST feFlood %stdAttrs; class %ClassList; #IMPLIED style %StyleSheet; #IMPLIED %PresentationAttributes-Color; %PresentationAttributes-feFlood; %PresentationAttributes-FilterPrimitives; %filter_primitive_attributes_with_in; > |
La propriété 'flood-color' indique quelle couleur utiliser pour inonder la sous-région de primitive de filtre courante. On peut spécifier le mot-clé currentColor et des couleurs ICC de la même manière que pour une spécification de valeur de <peinture> pour les propriétés 'fill' et 'stroke'.
Valeur : | currentColor | <couleur> [icc-color(<nom>[,<valeur-couleur-icc>]*)] | inherit vf. |
Valeur initiale : | black |
S'applique à : | ceux des éléments 'feFlood' |
Héritée : | non |
Pourcentages : | sans objet |
Médias : | visuel |
Animatable: | oui |
La propriété 'flood-opacity' la valeur d'opacité à utiliser dans toute la sous-région de primitive de filtre.
Valeur : | <valeur-alpha> | inherit vf. « errata 2002-06-06 » |
Valeur initiale : | 1 |
S'applique à : | ceux des éléments'feFlood' |
Héritée : | non |
Pourcentages : | sans objet |
Médias : | visuel |
Animatable: | oui |
Cette primitive de filtre effectue un flou gaussien sur l'image en entrée.
Le noyau de flou gaussien est une approximation de cette convolution normalisée :
H(x) = exp(-x2/ (2s2)) / sqrt(2* pi*s2)
dans laquelle 's' est la déviation standard spécifiée par l'attribut stdDeviation.
La valeur de l'attribut stdDeviation peut consister d'un ou de deux nombres. Si on fournit deux nombres, le premier représente une valeur de déviation standard le long de l'axe-x du système de coordonnées courant et le second une déviation standard sur l'axe-y. Si un seul nombre est fourni, alors cette valeur est utilisée pour X et Y.
Même si une seule valeur est fournie pour l'attribut stdDeviation, on peut implémenter ceci comme une convolution à part.
Pour des valeurs de 's' plus grandes (s >= 2.0), on peut utiliser une approximation : trois flous de boîte successifs construisent un noyau de convolution du second degré au niveau de la pièce, ce qui donne une approximation du noyau gaussien d'à-peu-près 3%.
soit d = floor(s * 3*sqrt(2*pi)/4 + 0.5)
... si d est impair, utiliser trois flous de boîte de taille 'd', centrés sur le pixel de sortie.
... si d est pair, utiliser deux flous de boîte de taille 'd' (le premier centré sur la limite du pixel entre le pixel de sortie et celui de gauche, le second centré sur la limite du pixel entre le pixel de sortie et celui de droite) et un flou de boîte de taille 'd+1' centré sur le pixel de sortie.
Fréquemment, cette opération interviendra sur des images alpha seul, comme celles produites pour l'entrée intégrée SourceAlpha. L'implémentation peut en tenir compte et optimiser ce cas avec un seul canal. Si l'entrée est de dimension infinie et si elle est constante, cette opération ne produit aucun effet. Si l'entrée est de dimension infinie et si elle est une mosaïque, le filtre est évalué selon des conditions de limite périodiques.
<!ELEMENT feGaussianBlur (animate|set)* > <!ATTLIST feGaussianBlur %stdAttrs; %PresentationAttributes-FilterPrimitives; %filter_primitive_attributes_with_in; stdDeviation %NumberOptionalNumber; #IMPLIED > |
Définitions des attributs :
L'exemple au début de ce chapitre faisait appel à la primitive de filtre feGaussianBlur pour créer un effet d'ombrage.
Cette primitive de filtre reporte à un graphique externe à cet élément de filtre, qui est chargé ou rendu dans une trame RGBA et qui devient le résultat de cette primitive de filtre.
Cette primitive de filtre peut reporter à une image externe ou peut référencer un autre fragment SVG. Elle produit une image similaire à la source image intégrée SourceGraphic, excepté que le graphique provient d'une source externe.
Si l'attribut xlink:href référence une ressource image autonome, tel un fichier JPEG, PNG ou SVG, alors la ressource image est rendue selon le comportement de l'élément 'image' ; sinon, la ressource appelée est rendue selon le comportement de l'élément 'use'. Dans l'un ou l'autre cas, le système de coordonnées utilisateur courant dépend de la valeur de l'attribut primitiveUnits sur l'élément 'filter'.
Quand l'image appelée doit être re-échantillonnée pour correspondre au système de coordonnées de l'appareil, on recommande que les visionneurs en haute qualité fassent appel à des techniques d'interpolation appropriées, par exemple bilinéaire ou bicubique. En fonction de la rapidité des interpolations disponibles, ce choix peut être affecté par le paramétrage de la propriété 'image-rendering'.
<!ELEMENT feImage (animate|set|animateTransform)* > <!ATTLIST feImage %stdAttrs; %xlinkRefAttrsEmbed; xlink:href %URI; #REQUIRED %langSpaceAttrs; externalResourcesRequired %Boolean; #IMPLIED class %ClassList; #IMPLIED style %StyleSheet; #IMPLIED %PresentationAttributes-All; > |
Cette primitive de filtre compose les couches d'image en entrée l'une sur l'autre en utilisant l'opérateur in avec l'Entrée1 (correspondant au premier élément 'feMergeNode' enfant) en-dessous et la dernière entrée spécifiée, l'EntréeN (correspond au dernier élément 'feMergeNode' enfant), par-dessus.
De nombreux effets produisent un certain nombre de couches intermédiaires pour la création de l'image de sortie finale. Ce filtre permet la fusion de ces couches en une seule image. Bien que cette opération puisse être réalisée en utilisant n-1 filtres feComposite, il est plus pratique de disposer de cette forme pour ces opérations communes en plus d'offrir plus de souplesse à l'implémentation.
Chaque élément 'feMerge' peut avoir un nombre quelconque de sous-éléments 'feMergeNode', chacun d'entre eux ayant un attribut in.
L'implémentation canonique de feMerge consiste à rendre l'effet en entier sur une couche RGBA puis à rendre cette couche résultante sur l'appareil de sortie. Dans certains cas (notamment quand l'appareil de sortie lui-même est en tons continus), la fusion étant associative, une approximation suffisante serait d'évaluer l'effet d'une couche à la fois et de rendre chaque couche individuellement sur l'appareil de sortie du dessous vers le dessus.
Si l'image en entrée du dessus est SourceGraphic et si cet élément 'feMerge' est la dernière primitive de filtre dans le filtre, on encourage l'implémentation à rendre les couches jusqu'à ce point, puis de rendre l'image SourceGraphic par-dessus, directement à partir de sa description vectorielle.
<!ELEMENT feMerge (feMergeNode)* > <!ATTLIST feMerge %stdAttrs; %PresentationAttributes-FilterPrimitives; %filter_primitive_attributes; > <!ELEMENT feMergeNode (animate|set)* > <!ATTLIST feMergeNode %stdAttrs; in CDATA #IMPLIED > |
L'exemple au début de ce chapitre fait appel à la primitive de filtre feMerge pour composer deux résultats de filtre intermédiaires.
Cette primitive de filtre effectue un « épaississement » ou un « amincissement » d'un dessin. Elle particulièrement utile pour un épaississement ou un amincissement du canal alpha.
Le noyau de dilatation (ou d'érosion) est un rectangle d'une largeur de of 2*rayon-x et d'une hauteur de 2*rayon-y. Dans la dilatation, le pixel de sortie représente le maximum individuel au niveau de la composante des valeurs R,G,B,A correspondantes dans le rectangle noyau de l'image en entrée. Dans l'érosion, le pixel de sortie représente le minimum individuel au niveau de la composante des valeurs R,G,B,A correspondantes dans le rectangle noyau de l'image en entrée.
Fréquemment, cette opération aura lieu sur des images alpha seul, comme celles produites par l'entrée intégrée SourceAlpha. L'implémentation peut en tenir compte et optimiser ce cas avec un seul canal.
Si l'entrée est de dimension infinie et si elle est constante, cette opération ne produit aucun effet. Si l'entrée est de dimension infinie et si elle est une mosaïque, le filtre est évalué selon des conditions de limite périodiques.
Comme l'élément 'feMorphology' opère sur des valeurs de couleur prémultipliées, il produira toujours des valeurs de couleur inférieures ou égales à celle du canal alpha.
<!ELEMENT feMorphology (animate|set)* > <!ATTLIST feMorphology %stdAttrs; %PresentationAttributes-FilterPrimitives; %filter_primitive_attributes_with_in; operator (erode | dilate) "erode" radius %NumberOptionalNumber; #IMPLIED > |
Définitions des attributs :
L'exemple feMorphology illustre les quatre types d'opération de feMorphology.
<?xml version="1.0"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg width="5cm" height="7cm" viewBox="0 0 700 500" xmlns="http://www.w3.org/2000/svg"> <title>Exemple feMorphology - exemples d'érosion et de dilatation</title> <desc>Cinq chaînes textuelles dessinées en contour. La première n'est pas filtrée. Les deuxième et troisième utilisent 'erode'. Les quatrième et cinquième utilisent 'dilate'.</desc> <defs> <filter id="Erode3"> <feMorphology operator="erode" in="SourceGraphic" radius="3" /> </filter> <filter id="Erode6"> <feMorphology operator="erode" in="SourceGraphic" radius="6" /> </filter> <filter id="Dilate3"> <feMorphology operator="dilate" in="SourceGraphic" radius="3" /> </filter> <filter id="Dilate6"> <feMorphology operator="dilate" in="SourceGraphic" radius="6" /> </filter> </defs> <rect fill="none" stroke="blue" stroke-width="2" x="1" y="1" width="698" height="498"/> <g enable-background="new" > <g font-family="Verdana" font-size="75" fill="none" stroke="black" stroke-width="6" > <text x="50" y="90">Non-filtré</text> <text x="50" y="180" filter="url(#Erode3)" >Erode rayon 3</text> <text x="50" y="270" filter="url(#Erode6)" >Erode rayon 6</text> <text x="50" y="360" filter="url(#Dilate3)" >Dilate rayon 3</text> <text x="50" y="450" filter="url(#Dilate6)" >Dilate rayon 6</text> </g> </g> </svg>
![]() |
Voir cet exemple en SVG (seulement avec navigateur gérant SVG)
Cette primitive de filtre décale l'image en entrée, par rapport à sa position courante dans l'espace de l'image, de la valeur spécifiée pour le vecteur.
C'est important pour les effets comme les effets d'ombrage.
Lors de l'application de ce filtre, la destination de l'emplacement peut être décalée d'une fraction de pixel dans l'espace de l'image. Dans ce cas, un visionneur en haute qualité devrait employer des techniques d'interpolation appropriées, par exemple bilinéaire ou bicubique. Ceci est particulièrement recommandé pour les visionneurs dynamiques pour lesquels cette interpolation offre des mouvements d'image visuellement fluides. Pour les visionneurs statiques, cela revêt moins d'importance. Le paramétrage de la propriété 'image-rendering' devrait faire l'objet d'une attention particulière pour la détermination des intentions de l'auteur.
<!ELEMENT feOffset (animate|set)* > <!ATTLIST feOffset %stdAttrs; %PresentationAttributes-FilterPrimitives; %filter_primitive_attributes_with_in; dx %Number; #IMPLIED dy %Number; #IMPLIED > |
Définitions des attributs :
L'exemple au début de ce chapitre fait appel à la primitive de filtre feOffset pour décaler l'ombrage du graphique source original.
Cette primitive de filtre éclaire un graphique source en utilisant le canal alpha comme placage de relief. L'image résultante est une image RGBA basée sur la couleur de la lumière. Le calcul de l'éclairage suit la composante spéculaire standard du modèle d'éclairage Phong. L'image résultante dépend de la couleur de la lumière, de la position du projecteur et de la géométrie de surface du placage de relief en entrée. Le résultat du calcul d'éclairage se rajoute. La primitive de filtre suppose que le spectateur se trouve à l'infini dans la direction de l'axe-z (i.e., le vecteur unitaire en direction de l'œil est partout de (0,0,1)).
Cette primitive de filtre produit une image qui contient la partie réflexion spéculaire du calcul d'éclairage. Une telle carte est destinée à être combinée avec une texture en utilisant le terme add de la méthode arithmetic de l'élément 'feComposite'. On peut simuler plusieurs sources lumineuses en rajoutant plusieurs de ces cartes de lumière, avant l'application du résultat obtenu à l'image de texture.
L'image RGBA résultante est calcultée comme suit :
Sr = ks * pow(N.H, specularExponent) * Lr
Sg = ks * pow(N.H, specularExponent) * Lg
Sb = ks * pow(N.H, specularExponent) * Lb
Sa = max(Sr, Sg, Sb)
dans laquelle formule :
Voir l'élément 'feDiffuseLighting' pour les définitions de N et (Lr, Lg, Lb).
La définition de H reflète notre hypothèse du vecteur de l'œil constant E = (0,0,1) :
H = (L + E) / Norm(L+E)
dans laquelle L est le vecteur unitaire de lumière.
À la différence de 'feDiffuseLighting', le filtre 'feSpecularLighting' produit une image non opaque. Ceci est dû au fait que le résultat spéculaire (Sr,Sg,Sb,Sa) est destiné à se rajouter à l'image texturée. Le canal alpha du résultat est égal au maximum des composantes de couleur, ainsi quand la lumière spéculaire est de zéro, aucune couverture supplémentaire ne vient se rajouter à l'image et une haute lumière complètement blanche ajoutera de l'opacité.
Les filtres 'feDiffuseLighting' et 'feSpecularLighting' seront souvent utilisés conjointement. Une implémentation peut en tenir compte et calculer les deux cartes en une seule passe au lien de deux.
<!ELEMENT feSpecularLighting ((feDistantLight|fePointLight|feSpotLight),(animate|set|animateColor)*) > <!ATTLIST feSpecularLighting %stdAttrs; class %ClassList; #IMPLIED style %StyleSheet; #IMPLIED %PresentationAttributes-Color; %PresentationAttributes-FilterPrimitives; %PresentationAttributes-LightingEffects; %filter_primitive_attributes_with_in; surfaceScale %Number; #IMPLIED specularConstant %Number; #IMPLIED specularExponent %Number; #IMPLIED kernelUnitLength %NumberOptionalNumber; #IMPLIED > |
Définitions des attributs :
La source lumineuse est définie par l'un des éléments enfants 'feDistantLight', 'fePointLight' ou 'feDistantLight'. La couleur de lumière est spécifiée par la propriété 'lighting-color'.
L'exemple au début de ce chapitre fait appel à la primitive de filtre pour obtenir un effet de brillance en 3D très réfléchissant.
Cette primitive de filtre remplit un rectangle cible avec un motif en mosaïque répété à partir d'une image en entrée. Le rectangle cible est aussi grand que la sous-région de primitive de filtre établie par les attributs x, y, width et height sur l'élément 'feTile'.
Typiquement, l'image en entrée aura été définie avec sa propre
sous-région de primitive de filtre pour définir le carreau de
référence de la mosaïque. L'élément 'feTile' réplique
le carreau de référence dans X et Y jusqu'à remplir complètement le rectangle cible. Le
coin supérieur gauche de chaque carreau se trouve à la position (x+i*width,y+j*height)
, où
(x,y)
représente le coin supérieur gauche de la sous-région de primitive de filtre de l'image
en entrée, width
et height
en représentant la largeur et la hauteur, i
et j
pouvant être toute valeur entière. Dans la plupart des cas, l'image en entrée aura une
sous-région de primitive de filtre plus petite que l'élément 'feTile'
pour obtenir un effet de motif répété.
Les implémenteurs doivent prendre les mesures appropriées lors de la construction de la mosaïque pour éviter les artefacts entre les carreaux, notamment quand la transformation de l'utilisateur vers l'appareil fait intervenir un découpage et/ou une rotation. Si on ne fait pas attention, l'interpolation peut amener des pixels de bord de carreau à avoir des valeurs d'opacité inférieures ou supérieures à celles prévues, du fait d'interactions lors de la peinture de carreaux adjacents, chacun d'eux ayant certains pixels qui se chevauchent.
<!ELEMENT feTile (animate|set)* > <!ATTLIST feTile %stdAttrs; %PresentationAttributes-FilterPrimitives; %filter_primitive_attributes_with_in; > |
Cette primitive de filtre crée une image en utilisant la fonction de turbulence de Perlin. Elle permet la synthèse de textures artificielles comme des nuages ou du marbre. Pour une description en détail de la fonction de turbulence de Perlin, voir « Texturing and Modeling », Ebert et al, AP Professional, 1994. L'image résultante remplira la sous-région de primitive de filtre en entier pour cette primitive de filtre.
Il est possible de créer du bruit limité en bande passante en ne synthétisant qu'une octave.
Le code en langage C ci-dessous montre l'algorithme exact utilisé pour cet effet de filtre.
Pour fractalSum, on a turbFunctionResult qui vise une plage de -1 à 1 (le résultat
effectif peut excéder ces limites dans certains cas). Pour convertir une valeur de couleur, utiliser la formule :
colorValue = ((turbFunctionResult * 255) + 255) / 2
, puis ramener dans une plage de 0 à 255.
Pour la turbulence, on a turbFunctionResult qui vise une plage de 0 à 1 (le résultat effectif peut
excéder ces limites dans certains cas). Pour convertir une valeur de couleur, utiliser la formule :
colorValue = (turbFunctionResult * 255)
, puis ramener dans une plage de 0 à 255.
On utilise l'ordre suivant pour l'application des nombres pseudo-aléatoires. Une valeur germinale initiale est calculée à partir de la valeur de l'attribut seed. Ensuite l'implémentation calcule les points du treillis pour R, puis continue à recevoir des nombres pseudo-aléatoires supplémentaires relatifs au dernier nombre pseudo-aléatoire généré et calcule les points du treillis pour G, et ainsi de suite pour B et A.
Les valeurs de couleur et alpha générées sont dans l'espace de couleur déterminé par la valeur de la propriété 'color-interpolation-filters' :
/* Produit un résultat dans la plage [1, 2**31 - 2]. L'algorithme est : r = (a * r) mod m où a = 16807 et m = 2**31 - 1 = 2147483647 Voir [Park & Miller], CACM vol. 31 no. 10 p. 1195, Oct. 1988 Comme test : l'algorithme devrait produire le résultat 1043618065 comme 10000eme nombre générée si le germe initial est 1. */ #define RAND_m 2147483647 /* 2**31 - 1 */ #define RAND_a 16807 /* 7**5; racine primitive de m */ #define RAND_q 127773 /* m / a */ #define RAND_r 2836 /* m % a */ long setup_seed(long lSeed) { if (lSeed <= 0) lSeed = -(lSeed % (RAND_m - 1)) + 1; if (lSeed > RAND_m - 1) lSeed = RAND_m - 1; return lSeed; } long random(long lSeed) { long result; result = RAND_a * (lSeed % RAND_q) - RAND_r * (lSeed / RAND_q); if (result <= 0) result += RAND_m; return result; } #define BSize 0x100 #define BM 0xff #define PerlinN 0x1000 #define NP 12 /* 2^PerlinN */ #define NM 0xfff static uLatticeSelector[BSize + BSize + 2]; static double fGradient[4][BSize + BSize + 2][2]; struct StitchInfo { int nWidth; // De combien soustraire de l'enveloppe pour le raccord. int nHeight; int nWrapX; // Valeur minimum à envelopper. int nWrapY; }; static void init(long lSeed) { double s; int i, j, k; lSeed = setup_seed(lSeed); for(k = 0; k < 4; k++) { for(i = 0; i < BSize; i++) { uLatticeSelector[i] = i; for (j = 0; j < 2; j++) fGradient[k][i][j] = (double)(((lSeed = random(lSeed)) % (BSize + BSize)) - BSize) / BSize; s = double(sqrt(fGradient[k][i][0] * fGradient[k][i][0] + fGradient[k][i][1] * fGradient[k][i][1])); fGradient[k][i][0] /= s; fGradient[k][i][1] /= s; } } while(--i) { k = uLatticeSelector[i]; uLatticeSelector[i] = uLatticeSelector[j = (lSeed = random(lSeed)) % BSize]; uLatticeSelector[j] = k; } for(i = 0; i < BSize + 2; i++) { uLatticeSelector[BSize + i] = uLatticeSelector[i]; for(k = 0; k < 4; k++) for(j = 0; j < 2; j++) fGradient[k][BSize + i][j] = fGradient[k][i][j]; } } #define s_curve(t) ( t * t * (3. - 2. * t) ) #define lerp(t, a, b) ( a + t * (b - a) ) double noise2(int nColorChannel, double vec[2], StitchInfo *pStitchInfo) { int bx0, bx1, by0, by1, b00, b10, b01, b11; double rx0, rx1, ry0, ry1, *q, sx, sy, a, b, t, u, v; register i, j; t = vec[0] + PerlinN; bx0 = (int)t; bx1 = bx0+1; rx0 = t - (int)t; rx1 = rx0 - 1.0f; t = vec[1] + PerlinN; by0 = (int)t; by1 = by0+1; ry0 = t - (int)t; ry1 = ry0 - 1.0f; // Si raccord, ajuster les points du treillis en conséquence. if(pStitchInfo != NULL) { if(bx0 >= pStitchInfo->nWrapX) bx0 -= pStitchInfo->nWidth; if(bx1 >= pStitchInfo->nWrapX) bx1 -= pStitchInfo->nWidth; if(by0 >= pStitchInfo->nWrapY) by0 -= pStitchInfo->nHeight; if(by1 >= pStitchInfo->nWrapY) by1 -= pStitchInfo->nHeight; } bx0 &= BM; bx1 &= BM; by0 &= BM; by1 &= BM; i = uLatticeSelector[bx0]; j = uLatticeSelector[bx1]; b00 = uLatticeSelector[i + by0]; b10 = uLatticeSelector[j + by0]; b01 = uLatticeSelector[i + by1]; b11 = uLatticeSelector[j + by1]; sx = double(s_curve(rx0)); sy = double(s_curve(ry0)); q = fGradient[nColorChannel][b00]; u = rx0 * q[0] + ry0 * q[1]; q = fGradient[nColorChannel][b10]; v = rx1 * q[0] + ry0 * q[1]; a = lerp(sx, u, v); q = fGradient[nColorChannel][b01]; u = rx0 * q[0] + ry1 * q[1]; q = fGradient[nColorChannel][b11]; v = rx1 * q[0] + ry1 * q[1]; b = lerp(sx, u, v); return lerp(sy, a, b); } double turbulence(int nColorChannel, double *point, double fBaseFreqX, double fBaseFreqY, int nNumOctaves, bool bFractalSum, bool bDoStitching, double fTileX, double fTileY, double fTileWidth, double fTileHeight) { StitchInfo stitch; StitchInfo *pStitchInfo = NULL; // Pas de raccord quand NULL. // Ajuste les fréquences de base si nécessaire pour le raccord. if(bDoStitching) { // Lors du raccord du carreau de turbulence, les fréquences doivent être ajustées // de manière à ce que les bords du carreau soient continus. if(fBaseFreqX != 0.0) { double fLoFreq = double(floor(fTileWidth * fBaseFreqX)) / fTileWidth; double fHiFreq = double(ceil(fTileWidth * fBaseFreqX)) / fTileWidth; if(fBaseFreqX / fLoFreq < fHiFreq / fBaseFreqX) fBaseFreqX = fLoFreq; else fBaseFreqX = fHiFreq; } if(fBaseFreqY != 0.0) { double fLoFreq = double(floor(fTileHeight * fBaseFreqY)) / fTileHeight; double fHiFreq = double(ceil(fTileHeight * fBaseFreqY)) / fTileHeight; if(fBaseFreqY / fLoFreq < fHiFreq / fBaseFreqY) fBaseFreqY = fLoFreq; else fBaseFreqY = fHiFreq; } // Établit les valeurs de raccord initiales. pStitchInfo = &stitch; stitch.nWidth = int(fTileWidth * fBaseFreqX + 0.5f); stitch.nWrapX = fTileX * fBaseFreqX + PerlinN + stitch.nWidth; stitch.nHeight = int(fTileHeight * fBaseFreqY + 0.5f); stitch.nWrapY = fTileY * fBaseFreqY + PerlinN + stitch.nHeight; } double fSum = 0.0f; double vec[2]; vec[0] = point[0] * fBaseFreqX; vec[1] = point[1] * fBaseFreqY; double ratio = 1; for(int nOctave = 0; nOctave < nNumOctaves; nOctave++) { if(bFractalSum) fSum += double(noise2(nColorChannel, vec, pStitchInfo) / ratio); else fSum += double(fabs(noise2(nColorChannel, vec, pStitchInfo)) / ratio); vec[0] *= 2; vec[1] *= 2; ratio *= 2; if(pStitchInfo != NULL) { // Réinitialise les valeurs de raccord. Soustraire PerlinN avant la multiplication // et l'ajouter après est plus simple, au lieu de le soustraire une fois. stitch.nWidth *= 2; stitch.nWrapX = 2 * stitch.nWrapX - PerlinN; stitch.nHeight *= 2; stitch.nWrapY = 2 * stitch.nWrapY - PerlinN; } } return fSum; }
<!ELEMENT feTurbulence (animate|set)* > <!ATTLIST feTurbulence %stdAttrs; %PresentationAttributes-FilterPrimitives; %filter_primitive_attributes; baseFrequency %NumberOptionalNumber; #IMPLIED numOctaves %Integer; #IMPLIED seed %Number; #IMPLIED stitchTiles (stitch | noStitch) "noStitch" type (fractalNoise | turbulence) "turbulence" > |
Définitions des attributs :
lowFreq=floor(width*frequency)/width
et
hiFreq=ceil(width*frequency)/width
. Si frequency/lowFreq < hiFreq/frequency, alors utiliser lowFreq, sinon
utiliser hiFreq. Lors de la génération des valeurs de turbulence, générer les vecteurs du treillis
normalement pour un bruit Perlin, sauf pour ceux des points du treillis qui se situent aux bords de droite ou du bas de
l'aire active (la taille du carreau résultant). Dans ces cas, copier le vecteur de treillis à partir du côté
opposé de l'aire active.L'exemple feTurbulence montre les effets de divers réglages de paramétrage de feTurbulence.
<?xml version="1.0"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg width="450px" height="325px" viewBox="0 0 450 325" xmlns="http://www.w3.org/2000/svg"> <title>Exemple feTurbulence - exemples d'opérations de feTurbulence</title> <desc>Six aires rectangulaires montrant les effets de divers réglages de paramètre pour feTurbulence.</desc> <g font-family="Verdana" text-anchor="middle" font-size="10" > <defs> <filter id="Turb1" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%"> <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2"/> </filter> <filter id="Turb2" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%"> <feTurbulence type="turbulence" baseFrequency="0.1" numOctaves="2"/> </filter> <filter id="Turb3" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%"> <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="8"/> </filter> <filter id="Turb4" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%"> <feTurbulence type="fractalNoise" baseFrequency="0.1" numOctaves="4"/> </filter> <filter id="Turb5" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%"> <feTurbulence type="fractalNoise" baseFrequency="0.4" numOctaves="4"/> </filter> <filter id="Turb6" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%"> <feTurbulence type="fractalNoise" baseFrequency="0.1" numOctaves="1"/> </filter> </defs> <rect x="1" y="1" width="448" height="323" fill="none" stroke="blue" stroke-width="1" /> <rect x="25" y="25" width="100" height="75" filter="url(#Turb1)" /> <text x="75" y="117">type=turbulence</text> <text x="75" y="129">baseFrequency=0.05</text> <text x="75" y="141">numOctaves=2</text> <rect x="175" y="25" width="100" height="75" filter="url(#Turb2)" /> <text x="225" y="117">type=turbulence</text> <text x="225" y="129">baseFrequency=0.1</text> <text x="225" y="141">numOctaves=2</text> <rect x="325" y="25" width="100" height="75" filter="url(#Turb3)" /> <text x="375" y="117">type=turbulence</text> <text x="375" y="129">baseFrequency=0.05</text> <text x="375" y="141">numOctaves=8</text> <rect x="25" y="180" width="100" height="75" filter="url(#Turb4)" /> <text x="75" y="272">type=fractalNoise</text> <text x="75" y="284">baseFrequency=0.1</text> <text x="75" y="296">numOctaves=4</text> <rect x="175" y="180" width="100" height="75" filter="url(#Turb5)" /> <text x="225" y="272">type=fractalNoise</text> <text x="225" y="284">baseFrequency=0.4</text> <text x="225" y="296">numOctaves=4</text> <rect x="325" y="180" width="100" height="75" filter="url(#Turb6)" /> <text x="375" y="272">type=fractalNoise</text> <text x="375" y="284">baseFrequency=0.1</text> <text x="375" y="296">numOctaves=1</text> </g> </svg>
![]() |
Voir cet exemple en SVG (seulement avec navigateur gérant SVG)
Les interfaces suivantes sont définies ci-dessous : SVGFilterElement, SVGFilterPrimitiveStandardAttributes, SVGFEBlendElement, SVGFEColorMatrixElement, SVGFEComponentTransferElement, SVGComponentTransferFunctionElement, SVGFEFuncRElement, SVGFEFuncGElement, SVGFEFuncBElement, SVGFEFuncAElement, SVGFECompositeElement, SVGFEConvolveMatrixElement, SVGFEDiffuseLightingElement, SVGFEDistantLightElement, SVGFEPointLightElement, SVGFESpotLightElement, SVGFEDisplacementMapElement, SVGFEFloodElement, SVGFEGaussianBlurElement, SVGFEImageElement, SVGFEMergeElement, SVGFEMergeNodeElement, SVGFEMorphologyElement, SVGFEOffsetElement, SVGFESpecularLightingElement, SVGFETileElement, SVGFETurbulenceElement.
L'interface SVGFilterElement correspond à l'élément 'filter'.
interface SVGFilterElement : SVGElement, SVGURIReference, SVGLangSpace, SVGExternalResourcesRequired, SVGStylable, SVGUnitTypes { readonly attribute SVGAnimatedEnumeration filterUnits; readonly attribute SVGAnimatedEnumeration primitiveUnits; readonly attribute SVGAnimatedLength x; readonly attribute SVGAnimatedLength y; readonly attribute SVGAnimatedLength width; readonly attribute SVGAnimatedLength height; readonly attribute SVGAnimatedInteger filterResX; readonly attribute SVGAnimatedInteger filterResY; void setFilterRes ( in unsigned long filterResX, in unsigned long filterResY ); };
in unsigned long filterResX | Le composant X de l'attribut filterRes. | |
in unsigned long filterResY | Le composant Y de l'attribut filterRes. |
Cette interface définit le jeu d'attributs DOM commun aux interfaces de filtre.
interface SVGFilterPrimitiveStandardAttributes : SVGStylable { readonly attribute SVGAnimatedLength x; readonly attribute SVGAnimatedLength y; readonly attribute SVGAnimatedLength width; readonly attribute SVGAnimatedLength height; readonly attribute SVGAnimatedString result; };
L'interface SVGFEBlendElement correspond à l'élément 'feBlend'.
interface SVGFEBlendElement : SVGElement, SVGFilterPrimitiveStandardAttributes { // Types de mode de mélange const unsigned short SVG_FEBLEND_MODE_UNKNOWN = 0; const unsigned short SVG_FEBLEND_MODE_NORMAL = 1; const unsigned short SVG_FEBLEND_MODE_MULTIPLY = 2; const unsigned short SVG_FEBLEND_MODE_SCREEN = 3; const unsigned short SVG_FEBLEND_MODE_DARKEN = 4; const unsigned short SVG_FEBLEND_MODE_LIGHTEN = 5; readonly attribute SVGAnimatedString in1; readonly attribute SVGAnimatedString in2; readonly attribute SVGAnimatedEnumeration mode; };
SVG_FEBLEND_MODE_UNKNOWN | Le type ne fait pas partie de ceux prédéfinis. Tenter de définir une nouvelle valeur de ce type ou tenter de changer une valeur existante vers ce type est illégal. | |
SVG_FEBLEND_MODE_NORMAL | Correspond à la valeur normal. | |
SVG_FEBLEND_MODE_MULTIPLY | Correspond à la valeur multiply. | |
SVG_FEBLEND_MODE_SCREEN | Correspond à la valeur screen. | |
SVG_FEBLEND_MODE_DARKEN | Correspond à la valeur darken. | |
SVG_FEBLEND_MODE_LIGHTEN | Correspond à la valeur lighten. |
L'interface SVGFEColorMatrixElement correspond à l'élément 'feColorMatrix'.
interface SVGFEColorMatrixElement : SVGElement, SVGFilterPrimitiveStandardAttributes { // Types de matrice de couleur const unsigned short SVG_FECOLORMATRIX_TYPE_UNKNOWN = 0; const unsigned short SVG_FECOLORMATRIX_TYPE_MATRIX = 1; const unsigned short SVG_FECOLORMATRIX_TYPE_SATURATE = 2; const unsigned short SVG_FECOLORMATRIX_TYPE_HUEROTATE = 3; const unsigned short SVG_FECOLORMATRIX_TYPE_LUMINANCETOALPHA = 4; readonly attribute SVGAnimatedString in1; readonly attribute SVGAnimatedEnumeration type; readonly attribute SVGAnimatedNumberList values; };
SVG_FECOLORMATRIX_TYPE_UNKNOWN | Le type ne fait pas partie de ceux prédéfinis. Tenter de définir une nouvelle valeur de ce type ou tenter de changer une valeur existante vers ce type est illégal. | |
SVG_FECOLORMATRIX_TYPE_MATRIX | Correspond à la valeur matrix. | |
SVG_FECOLORMATRIX_TYPE_SATURATE | Correspond à la valeur saturate. | |
SVG_FECOLORMATRIX_TYPE_HUEROTATE | Correspond à la valeur hueRotate. | |
SVG_FECOLORMATRIX_TYPE_LUMINANCETOALPHA | Correspond à la valeur luminanceToAlpha. |
Fournit un accès au contenu de l'attribut values.
L'interface SVGFEComponentTransferElement correspond à l'élément 'feComponentTransfer'.
interface SVGFEComponentTransferElement : SVGElement, SVGFilterPrimitiveStandardAttributes { readonly attribute SVGAnimatedString in1; };
Cette interface définit une interface de base utilisée par les interfaces des fonctions de transfert de composante.
interface SVGComponentTransferFunctionElement : SVGElement { // Types de transfert de composante const unsigned short SVG_FECOMPONENTTRANSFER_TYPE_UNKNOWN = 0; const unsigned short SVG_FECOMPONENTTRANSFER_TYPE_IDENTITY = 1; const unsigned short SVG_FECOMPONENTTRANSFER_TYPE_TABLE = 2; const unsigned short SVG_FECOMPONENTTRANSFER_TYPE_DISCRETE = 3; const unsigned short SVG_FECOMPONENTTRANSFER_TYPE_LINEAR = 4; const unsigned short SVG_FECOMPONENTTRANSFER_TYPE_GAMMA = 5; readonly attribute SVGAnimatedEnumeration type; readonly attribute SVGAnimatedNumberList tableValues; readonly attribute SVGAnimatedNumber slope; readonly attribute SVGAnimatedNumber intercept; readonly attribute SVGAnimatedNumber amplitude; readonly attribute SVGAnimatedNumber exponent; readonly attribute SVGAnimatedNumber offset; };
SVG_FECOMPONENTTRANSFER_TYPE_UNKNOWN | Le type ne fait pas partie de ceux prédéfinis. Tenter de définir une nouvelle valeur de ce type ou tenter de changer une valeur existante vers ce type est illégal. | |
SVG_FECOMPONENTTRANSFER_TYPE_IDENTITY | Correspond à la valeur identity. | |
SVG_FECOMPONENTTRANSFER_TYPE_TABLE | Correspond à la valeur table. | |
SVG_FECOMPONENTTRANSFER_TYPE_DISCRETE | Correspond à la valeur discrete. | |
SVG_FECOMPONENTTRANSFER_TYPE_LINEAR | Correspond à la valeur linear. | |
SVG_FECOMPONENTTRANSFER_TYPE_GAMMA | Correspond à la valeur gamma. |
L'interface SVGFEFuncRElement correspond à l'élément 'feFuncR'.
interface SVGFEFuncRElement : SVGComponentTransferFunctionElement {};
L'interface SVGFEFuncGElement correspond à l'élément 'feFuncG'.
interface SVGFEFuncGElement : SVGComponentTransferFunctionElement {};
L'interface SVGFEFuncBElement correspond à l'élément 'feFuncB'.
interface SVGFEFuncBElement : SVGComponentTransferFunctionElement {};
L'interface SVGFEFuncAElement correspond à l'élément 'feFuncA'.
interface SVGFEFuncAElement : SVGComponentTransferFunctionElement {};
L'interface SVGFECompositeElement correspond à l'élément 'feComposite'.
interface SVGFECompositeElement : SVGElement, SVGFilterPrimitiveStandardAttributes { // Composite Operators const unsigned short SVG_FECOMPOSITE_OPERATOR_UNKNOWN = 0; const unsigned short SVG_FECOMPOSITE_OPERATOR_OVER = 1; const unsigned short SVG_FECOMPOSITE_OPERATOR_IN = 2; const unsigned short SVG_FECOMPOSITE_OPERATOR_OUT = 3; const unsigned short SVG_FECOMPOSITE_OPERATOR_ATOP = 4; const unsigned short SVG_FECOMPOSITE_OPERATOR_XOR = 5; const unsigned short SVG_FECOMPOSITE_OPERATOR_ARITHMETIC = 6; readonly attribute SVGAnimatedString in1; readonly attribute SVGAnimatedString in2; readonly attribute SVGAnimatedEnumeration operator; readonly attribute SVGAnimatedNumber k1; readonly attribute SVGAnimatedNumber k2; readonly attribute SVGAnimatedNumber k3; readonly attribute SVGAnimatedNumber k4; };
SVG_FECOMPOSITE_OPERATOR_UNKNOWN | Le type ne fait pas partie de ceux prédéfinis. Tenter de définir une nouvelle valeur de ce type ou tenter de changer une valeur existante vers ce type est illégal. | |
SVG_FECOMPOSITE_OPERATOR_OVER | Correspond à la valeur over. | |
SVG_FECOMPOSITE_OPERATOR_IN | Correspond à la valeur in. | |
SVG_FECOMPOSITE_OPERATOR_OUT | Correspond à la valeur out. | |
SVG_FECOMPOSITE_OPERATOR_ATOP | Correspond à la valeur atop. | |
SVG_FECOMPOSITE_OPERATOR_XOR | Correspond à la valeur xor. | |
SVG_FECOMPOSITE_OPERATOR_ARITHMETIC | Correspond à la valeur arithmetic. |
L'interface SVGFEConvolveMatrixElement correspond à l'élément 'feConvolveMatrix'.
interface SVGFEConvolveMatrixElement :
SVGElement,
SVGFilterPrimitiveStandardAttributes {
// Valeurs de mode de bord
const unsigned short SVG_EDGEMODE_UNKNOWN = 0;
const unsigned short SVG_EDGEMODE_DUPLICATE = 1;
const unsigned short SVG_EDGEMODE_WRAP = 2;
const unsigned short SVG_EDGEMODE_NONE = 3;
readonly attribute SVGAnimatedInteger orderX;
readonly attribute SVGAnimatedInteger orderY;
readonly attribute SVGAnimatedNumberList kernelMatrix;
readonly attribute SVGAnimatedNumber divisor;
readonly attribute SVGAnimatedNumber bias;
readonly attribute SVGAnimatedInteger targetX;
readonly attribute SVGAnimatedInteger targetY;
readonly attribute SVGAnimatedEnumeration edgeMode;
readonly attribute SVGAnimatedLength kernelUnitLengthX;
readonly attribute SVGAnimatedLength kernelUnitLengthY; « errata 2002-06-06 »
readonly attribute SVGAnimatedBoolean preserveAlpha;
};
SVG_EDGEMODE_UNKNOWN | Le type ne fait pas partie de ceux prédéfinis. Tenter de définir une nouvelle valeur de ce type ou tenter de changer une valeur existante vers ce type est illégal. | |
SVG_EDGEMODE_DUPLICATE | Correspond à la valeur duplicate. | |
SVG_EDGEMODE_WRAP | Correspond à la valeur wrap. | |
SVG_EDGEMODE_NONE | Correspond à la valeur none. |
L'interface SVGFEDiffuseLightingElement correspond à l'élément 'feDiffuseLighting'.
interface SVGFEDiffuseLightingElement :
SVGElement,
SVGFilterPrimitiveStandardAttributes {
readonly attribute SVGAnimatedString in1;
readonly attribute SVGAnimatedNumber surfaceScale;
readonly attribute SVGAnimatedNumber diffuseConstant; « errata 2002-06-06 »
};
L'interface SVGFEDistantLightElement correspond à l'élément 'feDistantLight'.
interface SVGFEDistantLightElement : SVGElement { readonly attribute SVGAnimatedNumber azimuth; readonly attribute SVGAnimatedNumber elevation; };
L'interface SVGFEPointLightElement correspond à l'élément 'fePointLight'.
interface SVGFEPointLightElement : SVGElement { readonly attribute SVGAnimatedNumber x; readonly attribute SVGAnimatedNumber y; readonly attribute SVGAnimatedNumber z; };
L'interface SVGFESpotLightElement correspond à l'élément 'feSpotLight'.
interface SVGFESpotLightElement : SVGElement { readonly attribute SVGAnimatedNumber x; readonly attribute SVGAnimatedNumber y; readonly attribute SVGAnimatedNumber z; readonly attribute SVGAnimatedNumber pointsAtX; readonly attribute SVGAnimatedNumber pointsAtY; readonly attribute SVGAnimatedNumber pointsAtZ; readonly attribute SVGAnimatedNumber specularExponent; readonly attribute SVGAnimatedNumber limitingConeAngle; };
L'interface SVGFEDisplacementMapElement correspond à l'élément 'feDisplacementMap'.
interface SVGFEDisplacementMapElement : SVGElement, SVGFilterPrimitiveStandardAttributes { // Sélecteurs de canal const unsigned short SVG_CHANNEL_UNKNOWN = 0; const unsigned short SVG_CHANNEL_R = 1; const unsigned short SVG_CHANNEL_G = 2; const unsigned short SVG_CHANNEL_B = 3; const unsigned short SVG_CHANNEL_A = 4; readonly attribute SVGAnimatedString in1; readonly attribute SVGAnimatedString in2; readonly attribute SVGAnimatedNumber scale; readonly attribute SVGAnimatedEnumeration xChannelSelector; readonly attribute SVGAnimatedEnumeration yChannelSelector; };
SVG_CHANNEL_UNKNOWN | Le type ne fait pas partie de ceux prédéfinis. Tenter de définir une nouvelle valeur de ce type ou tenter de changer une valeur existante vers ce type est illégal. | |
SVG_CHANNEL_R | Correspond à la valeur R. | |
SVG_CHANNEL_G | Correspond à la valeur G. | |
SVG_CHANNEL_B | Correspond à la valeur B. | |
SVG_CHANNEL_A | Correspond à la valeur A. |
L'interface SVGFEFloodElement correspond à l'élément 'feFlood'.
interface SVGFEFloodElement : SVGElement, SVGFilterPrimitiveStandardAttributes { readonly attribute SVGAnimatedString in1; };
L'interface SVGFEGaussianBlurElement correspond à l'élément 'feGaussianBlur'.
interface SVGFEGaussianBlurElement : SVGElement, SVGFilterPrimitiveStandardAttributes { readonly attribute SVGAnimatedString in1; readonly attribute SVGAnimatedNumber stdDeviationX; readonly attribute SVGAnimatedNumber stdDeviationY; void setStdDeviation ( in float stdDeviationX, in float stdDeviationY ); };
in float stdDeviationX | Le composant X de l'attribut stdDeviation. | |
in float stdDeviationY | Le composant Y de l'attribut stdDeviation. |
L'interface SVGFEImageElement correspond à l'élément 'feImage'.
interface SVGFEImageElement : SVGElement, SVGURIReference, SVGLangSpace, SVGExternalResourcesRequired, SVGFilterPrimitiveStandardAttributes {};
L'interface SVGFEMergeElement correspond à l'élément 'feMerge'.
interface SVGFEMergeElement : SVGElement, SVGFilterPrimitiveStandardAttributes {};
L'interface SVGFEMergeNodeElement correspond à l'élément 'feMergeNode'.
interface SVGFEMergeNodeElement : SVGElement { readonly attribute SVGAnimatedString in1; };
L'interface SVGFEMorphologyElement correspond à l'élément 'feMorphology'.
interface SVGFEMorphologyElement :
SVGElement,
SVGFilterPrimitiveStandardAttributes {
// Opérateurs de morphologie
const unsigned short SVG_MORPHOLOGY_OPERATOR_UNKNOWN = 0;
const unsigned short SVG_MORPHOLOGY_OPERATOR_ERODE = 1;
const unsigned short SVG_MORPHOLOGY_OPERATOR_DILATE = 2;
readonly attribute SVGAnimatedString in1;
readonly attribute SVGAnimatedEnumeration operator;
readonly attribute SVGAnimatedLength radiusX;
readonly attribute SVGAnimatedLength radiusY; « errata 2002-06-06 »
};
SVG_MORPHOLOGY_OPERATOR_UNKNOWN | Le type ne fait pas partie de ceux prédéfinis. Tenter de définir une nouvelle valeur de ce type ou tenter de changer une valeur existante vers ce type est illégal. | |
SVG_MORPHOLOGY_OPERATOR_ERODE | Correspond à la valeur erode. | |
SVG_MORPHOLOGY_OPERATOR_DILATE | Correspond à la valeur dilate. |
L'interface SVGFEOffsetElement correspond à l'élément 'feOffset'.
interface SVGFEOffsetElement : SVGElement, SVGFilterPrimitiveStandardAttributes { readonly attribute SVGAnimatedString in1; readonly attribute SVGAnimatedNumber dx; readonly attribute SVGAnimatedNumber dy; };
L'interface SVGFESpecularLightingElement correspond à l'élément 'feSpecularLighting'.
interface SVGFESpecularLightingElement : SVGElement, SVGFilterPrimitiveStandardAttributes { readonly attribute SVGAnimatedString in1; readonly attribute SVGAnimatedNumber surfaceScale; readonly attribute SVGAnimatedNumber specularConstant; readonly attribute SVGAnimatedNumber specularExponent; };
L'interface SVGFETileElement correspond à l'élément 'feTile'.
interface SVGFETileElement : SVGElement, SVGFilterPrimitiveStandardAttributes { readonly attribute SVGAnimatedString in1; };
L'interface SVGFETurbulenceElement correspond à l'élément 'feTurbulence'.
interface SVGFETurbulenceElement : SVGElement, SVGFilterPrimitiveStandardAttributes { // Types de turbulence const unsigned short SVG_TURBULENCE_TYPE_UNKNOWN = 0; const unsigned short SVG_TURBULENCE_TYPE_FRACTALNOISE = 1; const unsigned short SVG_TURBULENCE_TYPE_TURBULENCE = 2; // Stitch Options const unsigned short SVG_STITCHTYPE_UNKNOWN = 0; const unsigned short SVG_STITCHTYPE_STITCH = 1; const unsigned short SVG_STITCHTYPE_NOSTITCH = 2; readonly attribute SVGAnimatedNumber baseFrequencyX; readonly attribute SVGAnimatedNumber baseFrequencyY; readonly attribute SVGAnimatedInteger numOctaves; readonly attribute SVGAnimatedNumber seed; readonly attribute SVGAnimatedEnumeration stitchTiles; readonly attribute SVGAnimatedEnumeration type; };
SVG_TURBULENCE_TYPE_UNKNOWN | Le type ne fait pas partie de ceux prédéfinis. Tenter de définir une nouvelle valeur de ce type ou tenter de changer une valeur existante vers ce type est illégal. | |
SVG_TURBULENCE_TYPE_FRACTALNOISE | Correspond à la valeur fractalNoise. | |
SVG_TURBULENCE_TYPE_TURBULENCE | Correspond à la valeur turbulence. |
SVG_STITCHTYPE_UNKNOWN | Le type ne fait pas partie de ceux prédéfinis. Tenter de définir une nouvelle valeur de ce type ou tenter de changer une valeur existante vers ce type est illégal. | |
SVG_STITCHTYPE_STITCH | Correspond à la valeur stitch. | |
SVG_STITCHTYPE_NOSTITCH | Correspond à la valeur noStitch. |