15 Les effets de filtre

Contenu

• 15.1 Introduction
• 15.2 Un exemple
• 15.3 L'élément 'filter'
• 15.4 La propriété 'filter'
• 15.5 La région des effets de filtre
• 15.6 L'accès à l'image d'arrière-plan
• 15.7 Aperçu sur les primitives de filtre
  • 15.7.1 Aperçu
  • 15.7.2 Les attributs communs
  • 15.7.3 La sous-région d'une primitive de filtre
• 15.8 Les éléments et les propriétés de source lumineuse
  • 15.8.1 Introduction
  • 15.8.2 La source lumineuse 'feDistantLight'
  • 15.8.3 La source lumineuse 'fePointLight'
  • 15.8.4 La source lumineuse'feSpotLight'
  • 15.8.5 La propriété 'lighting-color'
• 15.9 La primitive de filtre 'feBlend'
• 15.10 La primitive de filtre 'feColorMatrix'
• 15.11 La primitive de filtre 'feComponentTransfer'
• 15.12 La primitive de filtre 'feComposite'
• 15.13 La primitive de filtre 'feConvolveMatrix'
• 15.14 La primitive de filtre 'feDiffuseLighting'
• 15.15 La primitive de filtre 'feDisplacementMap'
• 15.16 La primitive de filtre 'feFlood'
• 15.17 La primitive de filtre 'feGaussianBlur'
• 15.18 La primitive de filtre 'feImage'
• 15.19 La primitive de filtre 'feMerge'
• 15.20 La primitive de filtre 'feMorphology'
• 15.21 La primitive de filtre 'feOffset'
• 15.22 La primitive de filtre 'feSpecularLighting'
• 15.23 La primitive de filtre 'feTile'
• 15.24 La primitive de filtre 'feTurbulence'
• 15.25 Les interfaces du DOM

15.1 Introduction

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.

15.2 Un exemple

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>

Exemple Filtres01

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 :

1. La primitive de filtre 'feGaussianBlur' reçoit en entrée la valeur de l'attribut SourceAlpha, qui est le canal alpha du graphique source. Le résultat est stocké dans un tampon temporaire nommé "flou". Remarquer que "flou" est utilisé comme entrée pour les deux primitives de filtre 2 et 3 ;
2. La primitive de filtre 'feOffset' prend le tampon "flou", déplace le résultat dans une direction positive, à la fois dans x et y, puis crée un nouveau tampon nommé "flouDecalage". L'effet produit est celui d'un ombrage ;
3. La primitive de filtre 'feSpecularLighting' utilise le tampon "blur" comme modèle pour une élévation de surface et génère un effet de lumière provenant d'une seule source. Le résultat est stocké dans le tampon "speculaireSortie" ;
4. La primitive de filtre 'feComposite' applique un masque sur le résultat de la primitive de filtre 3 par le canal alpha de la source graphique originale, ainsi le résultat intermédiaire n'est pas plus grand que le graphique source original ;
5. La primitive de filtre 'feComposite' compose le résultat de l'éclairage spéculaire avec le graphique source original ;
6. La primitive de filtre 'feMerge' compose deux couches ensemble. La couche inférieure consiste du résultat de l'ombrage de la primitive de filtre 2. La couche supérieure consiste de l'éclairage spéculaire qui résulte de la primitive de filtre 5.

15.3 L'élément 'filter'

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 >

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.

15.4 La propriété 'filter'

La description de la propriété 'filter' est comme suit :

<uri>

Une référence d'URI vers un élément 'filter' qui définit l'effet de filtre devant être appliqué à cet élément.

none

N'applique aucun effet de filtre à cet élément.

15.5 La région des effets de filtre

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 :

• filterUnits={ userSpaceOnUse | objectBoundingBox }.
  Définit le système de coordonnées pour les attributs x, y, width, height.
  Pour une spécification filterUnits="userSpaceOnUse", les attributs x, y, width, height représentent des valeurs dans le système de coordonnées utilisateur courant en vigueur au moment où l'élément 'filter' est appelé (i.e., le système de coordonnées utilisateur de l'élément qui appelle l'élément 'filter' vi une propriété 'filter').
  Pour une spécification filterUnits="objectBoundingBox", alors les attributs x, y, width, height représentent des fractions ou des pourcentages de la boîte englobante de l'élément appelant (voir la section Les unités de la boîte englobante de l'objet).
  Si l'attribut filterUnits n'est pas spécifié, alors l'effet est comme si une valeur de objectBoundingBox était spécifiée.
  Animable : oui.
• Les attributs x, y, width, height, qui définissent une région rectangulaire du canevas sur laquelle ce filtre s'applique.
  La quantité de mémoire et le temps de traitement requis pour l'application du filtre dépendent de la taille de ce rectangle et de l'attribut filterRes du filtre.
  Le système de coordonnées pour ces attributs dépend de la valeur de l'attribut filterUnits.
  Une valeur négative pour width, ou height, provoque une erreur (voir Le traitement des erreurs). Une valeur de zéro désactive le rendu de l'élément qui a appelé le filtre.
  Les limites de ce rectangle se comporte comme une région de rognage exacte pour chaque primitive de filtre inclue dans un élément 'filter' donné ; ainsi, si l'effet d'une primitive de filtre devait s'étendre au-delà des limites du rectangle (ceci se produit parfois quand on utilise la primitive de filtre 'feGaussianBlur' avec un attribut stdDeviation important), des parties de l'effet seront rognées.
  Si les attributs x ou y ne sont pas spécifiés, l'effet produit est comme si une valeur de "-10%" était spécifiée.
  Si les attributs width ou height ne sont pas spécifiés, l'effet produit est comme si une valeur de "120%" était spécifiée.
  Animable : oui.
• filterRes (qui a la forme 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).
  L'assignation d'un valeur autre que celle par défaut à cet attribut devrait être effectuée avec soin. Une valeur trop petite pourrait conduire à une pixélisation inattendue du résultat. Une valeur trop grande entraîner un traitement lent et une grande consommation de mémoire.
  Une valeur négative provoque une erreur (voir Le traitement des erreurs). Une valeur de zéro désactive le rendu de l'élément qui a appelé le filtre.
  Animable : oui.

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%".

15.6 L'accès à l'image d'arrière-plan

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 :

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 :

• Elle active la capacité d'accès des enfants, de l'élément conteneur courant, à l'image d'arrière-plan ;
• Elle indique l'établissement d'un nouveau (i.e., initialement, noir transparent) canevas d'image d'arrière-plan et (de ce fait) que tous les enfants de l'élément conteneur seront rendus dans ce nouveau canevas d'image d'arrière-plan, en plus d'être rendus sur l'appareil cible.

La signification de enable-background: accumulate (la valeur initiale/par défaut) dépend du contexte :

• Si un élément conteneur ancêtre a une valeur de propriété 'enable-background:new', alors tous les éléments graphiques dans l'élément conteneur courant sont rendus à la fois sur le canevas de l'image d'arrière-plan de l'élément conteneur parent et sur l'appareil cible ;
• Sinon, il n'y a pas de canevas d'image d'arrière-plan et il n'est besoin de rendre les éléments graphiques que sur l'appareil cible. (Aucun besoin de les rendre sur le canevas d'image d'arrière-plan).

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 A₁ (son parent immédiat), A₂, etc. (Remarque : A₀ est E). Chaque ancêtre A_i aura un tampon d'image d'arrière-plan correspondant hors-écran TAMPON_i. 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 :

• Trouver l'élément A_i avec le plus petit indice i (y compris A₀ = E) dont la propriété 'enable-background' a la valeur new. (Remarque : s'il n'y a pas un tel élément ancêtre, alors aucune image d'arrière-plan n'est disponible pour E, auquel cas une image noire transparente fera office d'image d'arrière-plan pour E) ;
• Pour chaque A_i (de i=n à 1), initialiser TAMPON_i à noir transparent. Rendre tous les enfants de A_i jusqu'à A_i-1 exclus dans TAMPON_i. Les enfants sont peints, puis filtrés, masqués et composés selon les divers paramétrages de peinture, de filtre, de rognage, de masquage et d'opacité d'objet de l'enfant donné. Tous les effets de filtre, les masquages et les opacités de groupe qui pourraient concerner A_i ne s'appliquent pas lors du rendu des enfants de A_i dans TAMPON_i.
  (Remarquer que dans le cas où A₀ = E, le contenu graphique de E n'est pas rendu dans TAMPON₁ et, de ce fait, ne fait pas partie de l'image d'arrière-plan disponible pour E. Plutôt, le contenu graphique de E est disponible via les pseudo-entrées d'image SourceGraphic et SourceAlpha) ;
• Ensuite, pour chaque A_i (de i=1 à n-1), composer TAMPON_i dans TAMPON_i+1 ;
• Le résultat cumulé (i.e., TAMPON_n) représente l'image d'arrière-plan disponible pour E.

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>

Exemple enable-background01

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 :

1. Le premier jeu représente le graphique de référence. Celui-ci consiste en un rectangle rouge suivi d'un élément 'g' transparent à 50%. Dans l'élément 'g' se trouvent un cercle vert qui recouvre partiellement le rectangle et un triangle bleu qui recouvre partiellement le cercle. Les trois objets sont ensuite entourés par un rectangle avec un liseré bleu mince. Aucun filtre n'est appliqué à ce graphique de référence ;
2. Le deuxième jeu active le traitement de l'image d'arrière-plan et ajoute un élément 'g' vide qui invoque le filtre ArrPlanDeplaceFlou. Ce filtre prend en entrée l'image d'arrière-plan cumulée courante (i.e., le graphique de référence en entier), la déplace hors-écran vers le bas, lui applique un flou puis transcrit le résultat sur canevas. Remarquer que le hors-écran pour le filtre est initialisé au noir transparent, ce qui permet au rectangle, au cercle et au triangle déjà rendus de transparaître après que le filtre a rendu son propre résultat sur le canevas ;
3. Le troisième jeu active le traitement de l'image d'arrière-plan et, autrement, invoque le filtre ArrPlanDeplaceFlou sur l'élément 'g' interne. L'arrière-plan cumulé, au moment de l'application du filtre, ne contient que le rectangle rouge. Ceci du fait que les enfants de l'élément 'g' interne (i.e., le cercle et le triangle) ne font pas partie de l'arrière-plan de cet élément 'g' interne et, comme le filtre ArrPlanDeplaceFlou ignore la valeur SourceGraphic, les enfants de l'élément 'g' interne n'apparaissent pas dans le résultat ;
4. Le quatrième jeu active le traitement de l'image d'arrière-plan et invoque le filtre ArrPlanDeplaceFlou sur l'élément 'polygon' qui dessine le triangle. L'arrière-plan cumulé, au moment de l'application du filtre, contient le rectangle rouge plus le cercle vert qui ignorent l'effet de la propriété 'opacity' sur l'élément 'g'. (Remarquer que le cercle vert flou, en bas, ne laisse pas transparaître le rectangle rouge à sa gauche. Ceci est dû à l'ignorance de la propriété 'opacity'). Comme le triangle lui-même ne fait pas partie de l'arrière-plan cumulé et comme le filtre ArrPlanDeplaceFlou ignore la valeur SourceGraphic, le triangle n'apparaît pas dans le résultat ;
5. Le cinquième jeu reproduit le quatrièem, sauf que c'est le filtre ArrPlanDeplaceFlou_sansSourceGraphic qui est invoqué, au lieu de ArrPlanDeplaceFlou. Le filtre ArrPlanDeplaceFlou_sansSourceGraphic réalise le même effet que ArrPlanDeplaceFlou, mais rend SourceGraphic par-dessus l'image d'arrière-plan déplacée et floue. Dans ce cas, SourceGraphic représente le triangle bleu ; ainsi, le résultat est identique à celui du quatrième jeu, à la différence que le triangle bleu apparaît maintenant.

15.7 Aperçu sur les primitives de filtre

15.7.1 Aperçu

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.

15.7.2 Les attributs communs

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

15.7.3 La sous-région d'une primitive de filtre

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.

15.8 Les éléments et les propriétés de source lumineuse

15.8.1 Introduction

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.

15.8.2 La source lumineuse 'feDistantLight'

<!ELEMENT feDistantLight (animate|set)* >
<!ATTLIST feDistantLight
  %stdAttrs;
  azimuth %Number; #IMPLIED
  elevation %Number; #IMPLIED >

15.8.3 La source lumineuse 'fePointLight'

<!ELEMENT fePointLight (animate|set)* >
<!ATTLIST fePointLight
  %stdAttrs;
  x %Number; #IMPLIED
  y %Number; #IMPLIED
  z %Number; #IMPLIED >

15.8.4 La source lumineuse'feSpotLight'

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

15.8.5 La propriété 'lighting-color'

La propriété 'lighting-color' définit la couleur de la source lumineuse pour les primitives de filtre 'feDiffuseLighting' et 'feSpecularLighting'.

15.9 La primitive de filtre 'feBlend'

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

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 :

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>

Exemple feBlend

Voir cet exemple en SVG (seulement avec navigateur gérant SVG)
 

15.10 La primitive de filtre 'feColorMatrix'

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 >

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>

Exemple feColorMatrix

Voir cet exemple en SVG (seulement avec navigateur gérant SVG)
 

15.11 La primitive de filtre 'feComponentTransfer'

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

La spécification des fonctions de transfert est définie par les sous-éléments de 'feComponentTransfer' :

'feFuncR', la fonction de transfert pour la composante rouge du graphique en entrée

'feFuncG', la fonction de transfert pour la composante verte du graphique en entrée

'feFuncB', la fonction de transfert pour la composante bleue du graphique en entrée

'feFuncA', la fonction de transfert pour la composante alpha du graphique en entrée

Les attributs ci-dessous s'appliquent aux sous-éléments 'feFuncR', 'feFuncG', 'feFuncB' et 'feFuncA' qui définissent les fonctions de transfert.

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>

Exemple feComponentTransfer

Voir cet exemple en SVG (seulement avec navigateur gérant SVG)
 

15.12 La primitive de filtre 'feComposite'

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 >

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>

Exemple feComposite

Voir cet exemple en SVG (seulement avec navigateur gérant SVG)
 

15.13 La primitive de filtre 'feConvolveMatrix'

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 :

RESULT_X,Y = ( 
              SUM_{I=0 to [orderY-1]} { 
                SUM_{J=0 to [orderX-1]} { 
                  SOURCE_{X-targetX+J, Y-targetY+I} * kernelMatrix_{orderX-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 >

15.14 La primitive de filtre 'feDiffuseLighting'

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(A_x,A_y,A_z) = sqrt(A_x^2+A_y^2+A_z^2)

L'image RGBA résultante est calculée comme suit :

D_r = k_d * N.L * L_r
D_g = k_d * N.L * L_g
D_b = k_d * N.L * L_b
D_a = 1.0

dans laquelle formule :

k_d = constante d'éclairage diffus
N = vecteur unitaire normal à la surface, une fonction de x et y
L = vecteur unitaire allant de la surface vers la lumière, une fonction de x et y pour les cas de l'éclairage ponctuel et de l'éclairage spot
L_r,L_g,L_b = les composantes RGB de la lumière, une fonction de x et y pour le cas d'un éclairage spot

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 A_in (x,y) est :

Z (x,y) = surfaceScale * A_in (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 :

N_x (x,y)= - surfaceScale * FACTOR_x *
           (K_x(0,0)*I(x-dx,y-dy) + K_x(1,0)*I(x,y-dy) + K_x(2,0)*I(x+dx,y-dy) +
            K_x(0,1)*I(x-dx,y)   + K_x(1,1)*I(x,y)   + K_x(2,1)*I(x+dx,y)   +
            K_x(0,2)*I(x-dx,y+dy) + K_x(1,2)*I(x,y+dy) + K_x(2,2)*I(x+dx,y+dy))
N_y (x,y)= - surfaceScale * FACTOR_y *
           (K_y(0,0)*I(x-dx,y-dy) + K_y(1,0)*I(x,y-dy) + K_y(2,0)*I(x+dx,y-dy) +
            K_y(0,1)*I(x-dx,y)   + K_y(1,1)*I(x,y)   + K_y(2,1)*I(x+dx,y)   +
            K_y(0,2)*I(x-dx,y+dy) + K_y(1,2)*I(x,y+dy) + K_y(2,2)*I(x+dx,y+dy))
N_z (x,y) = 1.0

N = (N_x, N_y, N_z) / Norm((N_x,N_y,N_z))

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.

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 :

L_x = cos(azimuth)*cos(elevation)
L_y = sin(azimuth)*cos(elevation)
L_z = sin(elevation)

Pour les éclairages ponctuels et spot, il est une fonction de position :

L_x = Light_x - x
L_y = Light_y - y
L_z = Light_z - Z(x,y)

L = (L_x, L_y, L_z) / Norm(L_x, L_y, L_z)

dans laquelle Light_x, Light_y et Light_z est la position de la lumière en entrée.

L_r,L_g,L_b, le vecteur de couleur de la lumière, est une fonction de position seulement dans le cas d'un éclairage spot :

L_r = Light_r*pow((-L.S),specularExponent)
L_g = Light_g*pow((-L.S),specularExponent)
L_b = Light_b*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 :

S_x = pointsAtX - Light_x
S_y = pointsAtY - Light_y
S_z = pointsAtZ - Light_z

S = (S_x, S_y, S_z) / Norm(S_x, S_y, S_z)

Si L.S est positif, il n'y a pas de lumière. (L_r = L_g = L_b = 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 >

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

15.15 La primitive de filtre 'feDisplacementMap'

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

15.16 La primitive de filtre 'feFlood'

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

La propriété 'flood-opacity' la valeur d'opacité à utiliser dans toute la sous-région de primitive de filtre.

15.17 La primitive de filtre 'feGaussianBlur'

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(-x²/ (2s²)) / sqrt(2* pi*s²)

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 >

L'exemple au début de ce chapitre faisait appel à la primitive de filtre feGaussianBlur pour créer un effet d'ombrage.

15.18 La primitive de filtre 'feImage'

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

15.19 La primitive de filtre 'feMerge'

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.

15.20 La primitive de filtre 'feMorphology'

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 >

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>

Exemple feMorphology

Voir cet exemple en SVG (seulement avec navigateur gérant SVG)
 

15.21 La primitive de filtre 'feOffset'

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 >

L'exemple au début de ce chapitre fait appel à la primitive de filtre feOffset pour décaler l'ombrage du graphique source original.

15.22 La primitive de filtre 'feSpecularLighting'

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 :

S_r = k_s * pow(N.H, specularExponent) * L_r
S_g = k_s * pow(N.H, specularExponent) * L_g
S_b = k_s * pow(N.H, specularExponent) * L_b
S_a = max(S_r, S_g, S_b)

dans laquelle formule :

k_s = constante d'éclairage spéculaire
N = vecteur unitaire normal de surface, une fonction de x et y
H = vecteur unitaire « à mi-chemin » entre le vecteur unitaire de l'œil et celui de la lumière

L_r,L_g,L_b = composantes RGB de la lumière

Voir l'élément 'feDiffuseLighting' pour les définitions de N et (L_r, L_g, L_b).

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 (S_r,S_g,S_b,S_a) 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 >

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.

15.23 La primitive de filtre 'feTile'

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

15.24 La primitive de filtre 'feTurbulence'

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

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>

Exemple feTurbulence

Voir cet exemple en SVG (seulement avec navigateur gérant SVG)
 

15.25 Les interfaces du DOM

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

L'interface SVGFilterElement correspond à l'élément 'filter'.

Définition IDL

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 );
};

attributs

readonly SVGAnimatedEnumeration filterUnits

Correspond à l'attribut filterUnits sur l'élément 'filter' donné. Admet l'une des constantes définies dans SVGUnitTypes.

readonly SVGAnimatedEnumeration primitiveUnits

Correspond à l'attribut primitiveUnits sur l'élément 'filter' donné. Admet l'une des constantes définies dans SVGUnitTypes.

readonly SVGAnimatedLength x

Correspond à l'attribut x sur l'élément 'filter' donné.

readonly SVGAnimatedLength y

Correspond à l'attribut y sur l'élément 'filter' donné.

readonly SVGAnimatedLength width

Correspond à l'attribut width sur l'élément 'filter' donné.

readonly SVGAnimatedLength height

Correspond à l'attribut height sur l'élément 'filter' donné.

readonly SVGAnimatedInteger filterResX

Correspond à l'attribut filterRes sur l'élément 'filter' donné. Contient le composant X de l'attribut filterRes.

readonly SVGAnimatedInteger filterResY

Correspond à l'attribut filterRes sur l'élément 'filter' donné. Contient le composant Y (éventuellement, calculé automatiquement) de l'attribut filterRes.

Méthodes

setFilterRes

Règle les valeurs de l'attribut filterRes.

Paramètres

in unsigned long filterResX		Le composant X de l'attribut filterRes.
in unsigned long filterResY		Le composant Y de l'attribut filterRes.

Aucune valeur retournée

Aucune exception

L'interface SVGFilterPrimitiveStandardAttributes

Cette interface définit le jeu d'attributs DOM commun aux interfaces de filtre.

Définition IDL

interface SVGFilterPrimitiveStandardAttributes : SVGStylable { 
  readonly attribute SVGAnimatedLength x;
  readonly attribute SVGAnimatedLength y;
  readonly attribute SVGAnimatedLength width;
  readonly attribute SVGAnimatedLength height;
  readonly attribute SVGAnimatedString result;
};

attributs

readonly SVGAnimatedLength x

Correspond à l'attribut x sur l'élément donné.

readonly SVGAnimatedLength y

Correspond à l'attribut y sur l'élément donné.

readonly SVGAnimatedLength width

Correspond à l'attribut width sur l'élément donné.

readonly SVGAnimatedLength height

Correspond à l'attribut height sur l'élément donné.

readonly SVGAnimatedString result

Correspond à l'attribut result sur l'élément donné.

L'interface SVGFEBlendElement

L'interface SVGFEBlendElement correspond à l'élément 'feBlend'.

Définition IDL

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

Groupe de définition des types de mode de mélange

Constantes définies

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.

attributs

readonly SVGAnimatedString in1

Correspond à l'attribut in sur l'élément 'feBlend' donné.

readonly SVGAnimatedString in2

Correspond à l'attribut in2 sur l'élément 'feBlend' donné.

readonly SVGAnimatedEnumeration mode

Correspond à l'attribut mode sur l'élément 'feBlend' donné. Admet l'un des types de mode de mélange.

L'interface SVGFEColorMatrixElement

L'interface SVGFEColorMatrixElement correspond à l'élément 'feColorMatrix'.

Définition IDL

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

Groupe de définition des types de couleur de matrice

Constantes définies

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.

attributs

readonly SVGAnimatedString in1

Correspond à l'attribut in sur l'élément 'feColorMatrix' donné.

readonly SVGAnimatedEnumeration type

Correspond à l'attribut type sur l'élément 'feColorMatrix' donné. Admet l'un des types de matrice de couleur.

readonly SVGAnimatedNumberList values

Correspond à l'attribut values sur l'élément 'feColorMatrix' donné.

Fournit un accès au contenu de l'attribut values.

L'interface SVGFEComponentTransferElement

L'interface SVGFEComponentTransferElement correspond à l'élément 'feComponentTransfer'.

Définition IDL

interface SVGFEComponentTransferElement : 
                SVGElement,
                SVGFilterPrimitiveStandardAttributes { 

  readonly attribute SVGAnimatedString in1;
};

attributs

readonly SVGAnimatedString in1

Correspond à l'attribut in sur l'élément 'feComponentTransfer' donné.

L'interface SVGComponentTransferFunctionElement

Cette interface définit une interface de base utilisée par les interfaces des fonctions de transfert de composante.

Définition IDL

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

Groupe de définition des types de transfert de composante

Constantes définies

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.

attributs

readonly SVGAnimatedEnumeration type

Correspond à l'attribut type sur l'élément donné. Admet l'un des types de transfert de composante.

readonly SVGAnimatedNumberList tableValues

Correspond à l'attribut tableValues sur l'élément donné.

readonly SVGAnimatedNumber slope

Correspond à l'attribut slope sur l'élément donné.

readonly SVGAnimatedNumber intercept

Correspond à l'attribut intercept sur l'élément donné.

readonly SVGAnimatedNumber amplitude

Correspond à l'attribut amplitude sur l'élément donné.

readonly SVGAnimatedNumber exponent

Correspond à l'attribut exponent sur l'élément donné.

readonly SVGAnimatedNumber offset

Correspond à l'attribut offset sur l'élément donné.

L'interface SVGFEFuncRElement

L'interface SVGFEFuncRElement correspond à l'élément 'feFuncR'.

Définition IDL

interface SVGFEFuncRElement : SVGComponentTransferFunctionElement {};

L'interface SVGFEFuncGElement

L'interface SVGFEFuncGElement correspond à l'élément 'feFuncG'.

Définition IDL

interface SVGFEFuncGElement : SVGComponentTransferFunctionElement {};

L'interface SVGFEFuncBElement

L'interface SVGFEFuncBElement correspond à l'élément 'feFuncB'.

Définition IDL

interface SVGFEFuncBElement : SVGComponentTransferFunctionElement {};

L'interface SVGFEFuncAElement

L'interface SVGFEFuncAElement correspond à l'élément 'feFuncA'.

Définition IDL

interface SVGFEFuncAElement : SVGComponentTransferFunctionElement {};

L'interface SVGFECompositeElement

L'interface SVGFECompositeElement correspond à l'élément 'feComposite'.

Définition IDL

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

Groupe de définition des opérateurs de composition

Constantes définies

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.

attributs

readonly SVGAnimatedString in1

Correspond à l'attribut in sur l'élément 'feComposite' donné.

readonly SVGAnimatedString in2

Correspond à l'attribut in2 sur l'élément 'feComposite' donné.

readonly SVGAnimatedEnumeration operator

Correspond à l'attribut operator sur l'élément 'feComposite' donné. Admet l'un des opérateurs de composition.

readonly SVGAnimatedNumber k1

Correspond à l'attribut k1 sur l'élément 'feComposite' donné.

readonly SVGAnimatedNumber k2

Correspond à l'attribut k2 sur l'élément 'feComposite' donné.

readonly SVGAnimatedNumber k3

Correspond à l'attribut k3 sur l'élément 'feComposite' donné.

readonly SVGAnimatedNumber k4

Correspond à l'attribut k4 sur l'élément 'feComposite' donné.

L'interface SVGFEConvolveMatrixElement

L'interface SVGFEConvolveMatrixElement correspond à l'élément 'feConvolveMatrix'.

Définition IDL

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

Groupe de définition des valeurs de mode de bord

Constantes définies

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.

attributs

readonly SVGAnimatedInteger orderX

Correspond à l'attribut order sur l'élément 'feConvolveMatrix' donné.

readonly SVGAnimatedInteger orderY

Correspond à l'attribut order sur l'élément 'feConvolveMatrix' donné.

readonly SVGAnimatedNumberList kernelMatrix

Correspond à l'attribut kernelMatrix sur l'élément donné.

readonly SVGAnimatedNumber divisor

Correspond à l'attribut divisor sur l'élément 'feConvolveMatrix' donné.

readonly SVGAnimatedNumber bias

Correspond à l'attribut bias sur l'élément 'feConvolveMatrix' donné.

readonly SVGAnimatedInteger targetX

Correspond à l'attribut targetX sur l'élément 'feConvolveMatrix' donné.

readonly SVGAnimatedInteger targetY

Correspond à l'attribut targetY sur l'élément 'feConvolveMatrix' donné.

readonly SVGAnimatedEnumeration edgeMode

Correspond à l'attribut edgeMode sur l'élément 'feConvolveMatrix' donné. Admet l'un des types de mode de bord.

readonly SVGAnimatedLength kernelUnitLengthX

Correspond à l'attribut kernelUnitLength sur l'élément 'feConvolveMatrix' donné.

readonly SVGAnimatedLength kernelUnitLengthY

Correspond à l'attribut kernelUnitLength sur l'élément 'feConvolveMatrix' donné. « errata 2002-06-06 »

readonly SVGAnimatedBoolean preserveAlpha

Correspond à l'attribut preserveAlpha sur l'élément 'feConvolveMatrix' donné.

L'interface SVGFEDiffuseLightingElement

L'interface SVGFEDiffuseLightingElement correspond à l'élément 'feDiffuseLighting'.

Définition IDL

interface SVGFEDiffuseLightingElement : 
                SVGElement,
                SVGFilterPrimitiveStandardAttributes { 

  readonly attribute SVGAnimatedString in1;
  readonly attribute SVGAnimatedNumber surfaceScale;
  readonly attribute SVGAnimatedNumber diffuseConstant; « errata 2002-06-06 »
};

attributs

readonly SVGAnimatedString in1

Correspond à l'attribut in sur l'élément 'feDiffuseLighting' donné.

readonly SVGAnimatedNumber surfaceScale

Correspond à l'attribut surfaceScale sur l'élément 'feDiffuseLighting' donné.

readonly SVGAnimatedNumber diffuseConstant

Correspond à l'attribut diffuseConstant sur l'élément 'feDiffuseLighting' donné.

« errata 2002-06-06 »

L'interface SVGFEDistantLightElement

L'interface SVGFEDistantLightElement correspond à l'élément 'feDistantLight'.

Définition IDL

interface SVGFEDistantLightElement : SVGElement { 
  readonly attribute SVGAnimatedNumber azimuth;
  readonly attribute SVGAnimatedNumber elevation;
};

attributs

readonly SVGAnimatedNumber azimuth

Correspond à l'attribut azimuth sur l'élément 'feDistantLight' donné.

readonly SVGAnimatedNumber elevation

Correspond à l'attribut elevation sur l'élément 'feDistantLight' donné.

L'interface SVGFEPointLightElement

L'interface SVGFEPointLightElement correspond à l'élément 'fePointLight'.

Définition IDL

interface SVGFEPointLightElement : SVGElement { 
  readonly attribute SVGAnimatedNumber x;
  readonly attribute SVGAnimatedNumber y;
  readonly attribute SVGAnimatedNumber z;
};

attributs

readonly SVGAnimatedNumber x

Correspond à l'attribut x sur l'élément 'fePointLight' donné.

readonly SVGAnimatedNumber y

Correspond à l'attribut y sur l'élément 'fePointLight' donné.

readonly SVGAnimatedNumber z

Correspond à l'attribut z sur l'élément 'fePointLight' donné.

L'interface SVGFESpotLightElement

L'interface SVGFESpotLightElement correspond à l'élément 'feSpotLight'.

Définition IDL

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

attributs

readonly SVGAnimatedNumber x

Correspond à l'attribut x sur l'élément 'feSpotLight' donné.

readonly SVGAnimatedNumber y

Correspond à l'attribut y sur l'élément 'feSpotLight' donné.

readonly SVGAnimatedNumber z

Correspond à l'attribut z sur l'élément 'feSpotLight' donné.

readonly SVGAnimatedNumber pointsAtX

Correspond à l'attribut pointsAtX sur l'élément 'feSpotLight' donné.

readonly SVGAnimatedNumber pointsAtY

Correspond à l'attribut pointsAtY sur l'élément 'feSpotLight' donné.

readonly SVGAnimatedNumber pointsAtZ

Correspond à l'attribut pointsAtZ sur l'élément 'feSpotLight' donné.

readonly SVGAnimatedNumber specularExponent

Correspond à l'attribut specularExponent sur l'élément 'feSpotLight' donné.

readonly SVGAnimatedNumber limitingConeAngle

Correspond à l'attribut limitingConeAngle sur l'élément 'feSpotLight' donné.

L'interface SVGFEDisplacementMapElement

L'interface SVGFEDisplacementMapElement correspond à l'élément 'feDisplacementMap'.

Définition IDL

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

Groupe de définition des sélecteurs de canal

Constantes définies

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.

attributs

readonly SVGAnimatedString in1

Correspond à l'attribut in sur l'élément 'feDisplacementMap' donné.

readonly SVGAnimatedString in2

Correspond à l'attribut in2 sur l'élément 'feDisplacementMap' donné.

readonly SVGAnimatedNumber scale

Correspond à l'attribut scale sur l'élément 'feDisplacementMap' donné.

readonly SVGAnimatedEnumeration xChannelSelector

Correspond à l'attribut xChannelSelector sur l'élément 'feDisplacementMap' donné. Admet l'un des sélecteurs de canal.

readonly SVGAnimatedEnumeration yChannelSelector

Correspond à l'attribut yChannelSelector sur l'élément 'feDisplacementMap' donné. Admet l'un des sélecteurs de canal.

L'interface SVGFEFloodElement

L'interface SVGFEFloodElement correspond à l'élément 'feFlood'.

Définition IDL

interface SVGFEFloodElement : 
                SVGElement,
                SVGFilterPrimitiveStandardAttributes { 

  readonly attribute SVGAnimatedString      in1;
};

attributs

readonly SVGAnimatedString in1

Correspond à l'attribut in sur l'élément 'feFlood' donné.

L'interface SVGFEGaussianBlurElement

L'interface SVGFEGaussianBlurElement correspond à l'élément 'feGaussianBlur'.

Définition IDL

interface SVGFEGaussianBlurElement : 
                SVGElement,
                SVGFilterPrimitiveStandardAttributes { 

  readonly attribute SVGAnimatedString in1;
  readonly attribute SVGAnimatedNumber stdDeviationX;
  readonly attribute SVGAnimatedNumber stdDeviationY;

  void setStdDeviation ( in float stdDeviationX, in float stdDeviationY );
};

attributs

readonly SVGAnimatedString in1

Correspond à l'attribut in sur l'élément 'feGaussianBlur' donné.

readonly SVGAnimatedNumber stdDeviationX

Correspond à l'attribut stdDeviation sur l'élément 'feGaussianBlur' donné. Contient le composant X de l'attribut stdDeviation.

readonly SVGAnimatedNumber stdDeviationY

Correspond à l'attribut stdDeviation sur l'élément 'feGaussianBlur' donné. Contient le composant Y (éventuellement, calculé automatiquement) de l'attribut stdDeviation.

Méthodes

setStdDeviation

Règle les valeurs de l'attribut stdDeviation.

Paramètres

in float stdDeviationX		Le composant X de l'attribut stdDeviation.
in float stdDeviationY		Le composant Y de l'attribut stdDeviation.

Aucune valeur retournée

Aucune exception

L'interface SVGFEImageElement

L'interface SVGFEImageElement correspond à l'élément 'feImage'.

Définition IDL

interface SVGFEImageElement : 
                SVGElement,
                SVGURIReference,
                SVGLangSpace,
                SVGExternalResourcesRequired,
                SVGFilterPrimitiveStandardAttributes {};

L'interface SVGFEMergeElement

L'interface SVGFEMergeElement correspond à l'élément 'feMerge'.

Définition IDL

interface SVGFEMergeElement : 
                SVGElement,
                SVGFilterPrimitiveStandardAttributes {};

L'interface SVGFEMergeNodeElement

L'interface SVGFEMergeNodeElement correspond à l'élément 'feMergeNode'.

Définition IDL

interface SVGFEMergeNodeElement : SVGElement { 
  readonly attribute SVGAnimatedString in1;
};

attributs

readonly SVGAnimatedString in1

Correspond à l'attribut in sur l'élément 'feMergeNode' donné.

L'interface SVGFEMorphologyElement

L'interface SVGFEMorphologyElement correspond à l'élément 'feMorphology'.

Définition IDL

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 »
};

Groupe de définition des opérateurs de morphologie

Constantes définies

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.

attributs

readonly SVGAnimatedString in1

Correspond à l'attribut in sur l'élément 'feMorphology' donné.

readonly SVGAnimatedEnumeration operator

Correspond à l'attribut operator sur l'élément 'feMorphology' donné. Admet l'un des opérateurs de morphologie.

readonly SVGAnimatedLength radiusX

Correspond à l'attribut radius sur l'élément 'feMorphology' donné.

readonly SVGAnimatedLength radiusY

Correspond à l'attribut radius sur l'élément 'feMorphology' donné.

« errata 2002-06-06 »

L'interface SVGFEOffsetElement

L'interface SVGFEOffsetElement correspond à l'élément 'feOffset'.

Définition IDL

interface SVGFEOffsetElement : 
                SVGElement,
                SVGFilterPrimitiveStandardAttributes { 

  readonly attribute SVGAnimatedString in1;
  readonly attribute SVGAnimatedNumber dx;
  readonly attribute SVGAnimatedNumber dy;
};

attributs

readonly SVGAnimatedString in1

Correspond à l'attribut in sur l'élément 'feOffset' donné.

readonly SVGAnimatedNumber dx

Correspond à l'attribut dx sur l'élément 'feOffset' donné.

readonly SVGAnimatedNumber dy

Correspond à l'attribut dy sur l'élément 'feOffset' donné.

L'interface SVGFESpecularLightingElement

L'interface SVGFESpecularLightingElement correspond à l'élément 'feSpecularLighting'.

Définition IDL

interface SVGFESpecularLightingElement : 
                SVGElement,
                SVGFilterPrimitiveStandardAttributes { 

  readonly attribute SVGAnimatedString in1;
  readonly attribute SVGAnimatedNumber surfaceScale;
  readonly attribute SVGAnimatedNumber specularConstant;
  readonly attribute SVGAnimatedNumber specularExponent;
};

attributs

readonly SVGAnimatedString in1

Correspond à l'attribut in sur l'élément 'feSpecularLighting' donné.

readonly SVGAnimatedNumber surfaceScale

Correspond à l'attribut surfaceScale sur l'élément 'feSpecularLighting' donné.

readonly SVGAnimatedNumber specularConstant

Correspond à l'attribut specularConstant sur l'élément 'feSpecularLighting' donné.

readonly SVGAnimatedNumber specularExponent

Correspond à l'attribut specularExponent sur l'élément 'feSpecularLighting' donné.

L'interface SVGFETileElement

L'interface SVGFETileElement correspond à l'élément 'feTile'.

Définition IDL

interface SVGFETileElement : 
                SVGElement,
                SVGFilterPrimitiveStandardAttributes { 

  readonly attribute SVGAnimatedString in1;
};

attributs

readonly SVGAnimatedString in1

Correspond à l'attribut in sur l'élément 'feTile' donné.

L'interface SVGFETurbulenceElement

L'interface SVGFETurbulenceElement correspond à l'élément 'feTurbulence'.

Définition IDL

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

Groupe de définition des types de turbulence

Constantes définies

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.

Groupe de définition des options de raccord

Constantes définies

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.

attributs

readonly SVGAnimatedNumber baseFrequencyX

Correspond à l'attribut baseFrequencyX sur l'élément 'feTurbulence' donné.

readonly SVGAnimatedNumber baseFrequencyY

Correspond à l'attribut baseFrequencyY sur l'élément 'feTurbulence' donné.

readonly SVGAnimatedInteger numOctaves

Correspond à l'attribut numOctaves sur l'élément 'feTurbulence' donné.

readonly SVGAnimatedNumber seed

Correspond à l'attribut seed sur l'élément 'feTurbulence' donné.

readonly SVGAnimatedEnumeration stitchTiles

Correspond à l'attribut stitchTiles sur l'élément 'feTurbulence' donné. Admet l'une des options de raccord.

readonly SVGAnimatedEnumeration type

Correspond à l'attribut type sur l'élément 'feTurbulence' donné. Admet l'un des types de turbulence.