4 septembre 2001

15 Les effets de filtre


Contenu


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 :

Image montrant un graphique source modifié par un effet de filtre

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
Exemple Filtres01 - introduction aux effets de filtre

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 :

filters01 - graphique source original
Graphique source

 

filters01 - après filtre 1
Après primitive de filtre 1

 

filters01 - après filtre 2
Après primitive de filtre 2

 

filters01 - après filtre 3
Après primitive de filtre 3

  
   

filters01 - après filtre 4
Après primitive de filtre 4

 

filters01 - après filtre 5
Après primitive de filtre 5

 

filters01 - après filtre 6
Après primitive de filtre 6

  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 >

Définitions des attributs :

filterUnits = "userSpaceOnUse | objectBoundingBox"
Voir la section La région des effets de filtre.
primitiveUnits = "userSpaceOnUse | objectBoundingBox"
Spécifie le système de coordonnées pour les diverses valeurs de longueur des primitives de filtre et pour les attributs qui définissent la sous-région de primitive de filtre.
Pour une spécification primitiveUnits="userSpaceOnUse", toutes les valeurs de longueur des définitions de filtre 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' via une propriété 'filter').
Pour une spécification primitiveUnits="objectBoundingBox", alors toutes les valeurs de longueur dans les définitions de filtre représentent des fractions ou des pourcentages de la boître de délimitation de l'élément appelant (voir la section Les unités de la boîte englobante de l'objet).
Si l'attribut primitiveUnits n'est pas spécifié, alors l'effet produit est comme si une valeur de userSpaceOnUse était spécifiée.
Animable : oui.
x = "<coordonnée>"
Voir la section La région des effets de filtre.
y = "<coordonnée>"
Voir la section La région des effets de filtre.
width = "<longueur>"
Voir la section La région des effets de filtre.
height = "<longueur>"
Voir la section La région des effets de filtre.
filterRes= "<nombre-nombre-optionnel>"
Voir la section La région des effets de filtre.
xlink:href = "<uri>"
Une référence d'URI vers un autre élément 'filter' dans le fragment de document SVG courant. Tous les attributs défins sur l'élément 'filter' appelé, qui ne sont pas définis sur cet élément, sont hérités par cet élément. Si cet élément n'a pas de nœuds définis et que l'élément appelé a des nœuds de filtre définis (éventuellement en raison de son propre attribut href), alors cet élément hérite des nœuds de filtre définis dans l'élément 'filter' appelé. L'héritage peut être indirect jusqu'à un niveau arbitraire ; ainsi, si l'élément 'filter' appelé hérite d'attributs ou de la spécification d'un nœud de filtre à partir de son propre attribut href, alors l'élément courant peut hériter de ces attributs ou de ces spécifications de nœud de filtre.
Animable : oui.
Attributs définis ailleurs :
%stdAttrs;, %langSpaceAttrs;, %xlinkRefAttrs; externalResourcesRequired, %PresentationAttributes-All;.

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 :

'filter'
Valeur :   <uri> | none | inherit vf.
Valeur initiale :   none
S'applique à :   ceux des éléments conteneurs et aux éléments graphiques
Héritée :   non
Pourcentages :   sans objet
Médias :   visuel
Animatable:   oui
<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 :

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 :

'enable-background'
Valeur :   accumulate | new [ <x> <y> <largeur> <hauteur> ] | inherit vf.
Valeur initiale :   accumulate
S'applique à :   ceux des éléments conteneurs
Héritée :   non
Pourcentages :   sans objet
Médias :   visuel
Animatable:   non

La propriété 'enable-background', qui ne s'applique qu'aux éléments conteneurs, gère l'accumulation de l'image d'arrière-plan.

Une valeur de new indique deux choses :

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

Si un effet de filtre spécifie l'une ou l'autre pseudo-entrée d'image BackgroundImage ou BackgroundAlpha et si aucun élément conteneur ancêtre n'a une valeur de propriété 'enable-background:new', alors la requête de l'image d'arrière-plan constitue techniquement une erreur. Le traitement continuera sans interruption (i.e., aucun message d'erreur) et une image noire transparente sera renvoyée en réponse à cette requête.

Les paramètres optionnels <x>,<y>,<largeur>,<hauteur> de la valeur new désigne la sous-région de l'espace utilisateur de l'élément conteneur sur laquelle l'accès à l'image d'arrière-plan est autorisé à survenir. Ces paramètres induisent éventuellement l'agent utilisateur à allouer des tampons d'image temporaires plus petits que ceux des valeurs par défaut, ces dernières pouvant demander à l'agent utilisateur SVG une allocation des tampons aussi grande que la zone de visualisation courante. Ainsi, les valeurs <x>,<y>,<largeur>,<hauteur> agissent comme un rectangle de rognage net sur le canevas de l'image d'arrière-plan. Une valeur négative pour <largeur>, ou <hauteur>, provoque une erreur (voir Le traitement des erreurs). Si on spécifie au moins une mais moins que quatre des valeurs <x>,<y>,<largeur> et <hauteur> ou si on ne spécifie aucune valeur pour <largeur> ou <hauteur>, les pseudo-entrées BackgroundImage et BackgroundAlpha sont traitées comme si le traitement de l'image d'arrière-plan n'était pas activé.

Supposons que l'on ait un élément E dans le document et que E ait une succession d'ancêtres A1 (son parent immédiat), A2, etc. (Remarque : A0 est E). Chaque ancêtre Ai aura un tampon d'image d'arrière-plan correspondant hors-écran TAMPONi. Le contenu de l'image d'arrière-plan qui est disponible pour un élément 'filter', appelé par E, est défini comme suit :

L'exemple enable-background01 illustre les règles pour le traitement d'une image d'arrière-plan.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" 
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="13.5cm" height="2.7cm" viewBox="0 0 1350 270"
     xmlns="http://www.w3.org/2000/svg">
  <title>Exemple enable-background01</title>
  <desc>Ce galop d'essais montre cinq dessins qui illustrent les règles
        pour le traitement d'une image d'arrière-plan.</desc>

  <defs>
    <filter id="ArrPlanDeplaceFlou" 
            filterUnits="userSpaceOnUse" x="0" y="0" width="1200" height="400">
      <desc>
        Ce filtre écarte la constante SourceGraphic, s'il y en a une, et ne produit que
        le déplacement de BackgroundImage de 125 unités vers le bas
        puis applique un flou.
      </desc>
      <feOffset in="BackgroundImage" dx="0" dy="125" />
      <feGaussianBlur stdDeviation="8" />
    </filter>
    <filter id="ArrPlanDeplaceFlou_sansSourceGraphic" 
            filterUnits="userSpaceOnUse" x="0" y="0" width="1200" height="400">
      <desc>
        Ce filtre prend BackgroundImage, le déplace de 125 unités vers le bas, applique un flou
        puis rend SourceGraphic par-dessus l'arrière-plan déplacé et flou.
      </desc>
      <feOffset in="BackgroundImage" dx="0" dy="125" />
      <feGaussianBlur stdDeviation="8" result="blur" />
      <feMerge>
        <feMergeNode in="blur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>

  <g transform="translate(0,0)">
    <desc>La première image est le graphique de référence sans filtre.</desc>
    <rect x="25" y="25" width="100" height="100" fill="red"/>
    <g opacity=".5">
      <circle cx="125" cy="75" r="45" fill="green"/>
      <polygon points="160,25 160,125 240,75" fill="blue"/>
    </g>
    <rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/>
  </g>

  <g enable-background="new" transform="translate(270,0)">
    <desc>La deuxième ajoute un élément 'g' vide qui invoque ArrPlanDeplaceFlou.</desc>
    <rect x="25" y="25" width="100" height="100" fill="red"/>
    <g opacity=".5">
      <circle cx="125" cy="75" r="45" fill="green"/>
      <polygon points="160,25 160,125 240,75" fill="blue"/>
    </g>
    <g filter="url(#ArrPlanDeplaceFlou)"/>
    <rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/>
  </g>

  <g enable-background="new" transform="translate(540,0)">
    <desc>La troisième invoque ArrPlanDeplaceFlou sur le groupe interne.</desc>
    <rect x="25" y="25" width="100" height="100" fill="red"/>
    <g filter="url(#ArrPlanDeplaceFlou)" opacity=".5">
      <circle cx="125" cy="75" r="45" fill="green"/>
      <polygon points="160,25 160,125 240,75" fill="blue"/>
    </g>
    <rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/>
  </g>

  <g enable-background="new" transform="translate(810,0)">
    <desc>Le quatrième invoque ArrPlanDeplaceFlou sur le triangle.</desc>
    <rect x="25" y="25" width="100" height="100" fill="red"/>
    <g opacity=".5">
      <circle cx="125" cy="75" r="45" fill="green"/>
      <polygon points="160,25 160,125 240,75" fill="blue"
               filter="url(#ArrPlanDeplaceFlou)"/>
    </g>
    <rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/>
  </g>

  <g enable-background="new" transform="translate(1080,0)">
    <desc>Le cinquième invoque ArrPlanDeplaceFlou_sansSourceGraphic sur le triangle.</desc>
    <rect x="25" y="25" width="100" height="100" fill="red"/>
    <g opacity=".5">
      <circle cx="125" cy="75" r="45" fill="green"/>
      <polygon points="160,25 160,125 240,75" fill="blue"
               filter="url(#ArrPlanDeplaceFlou_sansSourceGraphic)"/>
    </g>
    <rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/>
  </g>
</svg>
Exemple enable-background01
Exemple enable-background-01 - illustration des règles de traitement de l'image d'arrière-plan

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

Définitions des attributs :

x = "<coordonnée>"
La coordonnée x minimum, pour la sous-région où le calcul et le rendu de la primitive de filtre donnée se restreignent. Voir la section La sous-région d'une primitive de filtre.
Animable : oui.
y = "<coordonnée>"
La coordonnée y minimum, pour la sous-région où le calcul et le rendu de la primitive de filtre donnée se restreignent. Voir la section La sous-région d'une primitive de filtre.
Animable : oui.
width = "<longueur>"
La largeur de la sous-région où le calcul et le rendu de la primitive de filtre donnée se restreignent. Voir la section La sous-région d'une primitive de filtre.
Une valeur négative provoque une erreur (voir Le traitement des erreurs). Une valeur de zéro désactive l'effet de la primitive de filtre donnée (i.e., ceci résulte en une image noire transparente).
Animable : oui.
height = "<longueur>"
La hauteur de la sous-région où le calcul et le rendu de la primitive de filtre donnée se restreignent. Voir la sectionLa sous-région d'une primitive de filtre.
Une valeur négative provoque une erreur (voir Le traitement des erreurs). Une valeur de zéro désactive l'effet de la primitive de filtre donnée (i.e., ceci résulte en une image noire transparente).
Animable : oui.
result = "<primitive-filtre-référence>"
Le nom assigné à cette primitive de filtre. Quand il est fourni, alors les graphiques issus du traitement de cette primitive de filtre peuvent être appelés par un attribut in sur une primitive de filtre subséquente dans le même élément 'filter'. Si aucune valeur n'est fournie, la sortie ne sera disponible qu'en réutilisation comme entrée implicite pour la primitive de filtre suivante, si cette dernière n'a aucune valeur pour son attribut in.
Remarquer que le type <primitive-filtre-référence> n'est pas un ID XML ; une valeur <primitive-filtre-référence> n'est plutôt significative que dans élément 'filter' donné et n'a ainsi qu'une portée locale. La même valeur <primitive-filtre-référence> peut apparaître plusieurs fois dans un même élément 'filter'. Quand elle est appelée, la valeur <primitive-filtre-référence> utilisera la primitive de filtre précédente la plus proche pour l'attribut result donné.
Animable : oui.
in = "SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <primitive-filtre-référence>"
Identifie une entrée pour la primitive de filtre donnée. La valeur peut être l'un ou l'autre des six mots-clés ou une chaîne qui correspond à la valeur d'un attribut result précédent dans le même élément 'filter'. Si aucune valeur n'est fournie et si c'est la première primitive de filtre, alors cette primitive de filtre utilisera la valeur SourceGraphic comme entrée. Si aucune valeur n'est fournie et si c'est une primitive de filtre subséquente, alors cette primitive de filtre utilisera le résultat de la primitive de filtre précédente comme entrée.

Si la valeur de l'attribut result apparaît plusieurs fois dans un élément 'filter' donné, alors un appel de ce résultat utilisera la primitive de filtre précédente la plus proche ayant la valeur donnée pour l'attribut result. Un appel de résultat descendant provoque une erreur.

Définitions des six mots-clés :
SourceGraphic
Ce mot-clé représente les éléments graphiques qui formaient l'entrée originale de l'élément 'filter'. Pour les primitives d'effets de filtre pixélisés, les éléments graphiques seront pixélisés en une trame RGBA initialement claire dans l'espace de l'image. Les pixels qui n'auront pas été touchés par le graphique original resteront clairs. L'image est spécifiée pour être rendue en pixels RGBA linéaires. Le canal alpha de cette image capture tout anti-crénelage spécifié par SVG. (Comme la trame est linéaire, le canal alpha de cette image représentera le pourcentage de couverture exact de chaque pixel).
SourceAlpha
Ce mot-clé représente les éléments graphiques qui formaient l'entrée originale de l'élément 'filter'. La valeur SourceAlpha suit toutes les mêmes règles que SourceGraphic, sauf que seul le canal alpha est utilisé. L'entrée est une image RGBA, consistant en valeurs de couleur noires pour les canaux RGB, mais dont le canal alpha est le même que SourceGraphic. Quand cette option est utilisée, alors certaines implémentations peuvent devoir pixéliser les éléments graphiques pour l'extraction du canal alpha.
BackgroundImage
Ce mot-clé représente un cliché-image du canevas en-dessous de la région du filtre au moment où l'élément 'filter' est invoqué. Voir la section L'accès à l'image d'arrière-plan.
BackgroundAlpha
Même chose que pour BackgroundImage, sauf que seul le canal alpha est utilisé. Voir SourceAlpha et la section L'accès à l'image d'arrière-plan.
FillPaint
Ce mot-clé représente la valeur de la propriété 'fill' sur l'élément cible pour l'effet de filtre. L'image FillPaint s'étend conceptuellement à l'infini. Fréquemment, cette image est partout opaque, mais ceci peut ne plus être le cas si la « peinture » elle-même a une valeur alpha, comme c'est le cas pour un dégradé, ou un motif, qui lui-même comprend des parties transparentes ou semi-transparentes.
StrokePaint
Ce mot-clé représente la valeur de la propriété 'stroke' sur l'élément cible pour l'effet de filtre. L'image StrokePaint s'étend conceptuellement à l'infini. Fréquemment, cette image est partout opaque, mais ceci peut ne plus être le cas si la « peinture » elle-même a une valeur alpha, comme c'est le cas pour un dégradé, ou un motif, qui lui-même comprend des parties transparentes ou semi-transparentes.
Animable : oui.

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 >

Définitions des attributs :

azimuth = "<nombre>"
La direction de l'angle de la source lumineuse sur le plan XY, en degrés.
Si l'attribut n'est pas spécifié, l'effet produit est comme si une valeur de 0 était spécifiée.
Animable : oui.
elevation = "<nombre>"
La direction de l'ange de la source lumineuse sur le plan YZ, en degrés.
Si l'attribut n'est pas spécifié, l'effet produit est comme si une valeur de 0 était spécifiée.
Animable : oui.
Attributs définis ailleurs :
%stdAttrs;.

15.8.3 La source lumineuse 'fePointLight'

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

Définitions des attributs :

x = "<nombre>"
La localisation X de la source lumineuse dans le système de coordonnées établi par l'attribut primitiveUnits sur l'élément 'filter'.
Si l'attribut n'est pas spécifié, l'effet produit est comme si une valeur de 0 était spécifiée.
Animable : oui.
y = "<nombre>"
La localisation Y de la source lumineuse dans le système de coordonnées établi par l'attribut primitiveUnits sur l'élément 'filter'.
Si l'attribut n'est pas spécifié, l'effet produit est comme si une valeur de 0 était spécifiée.
Animable : oui.
z = "<nombre>"
La localisation Z de la source lumineuse dans le système de coordonnées établi par l'attribut primitiveUnits sur l'élément 'filter', en supposant que, dans le système de coordonnées initial, l'axe-z positif se dirige vers la personne qui regarde le contenu et en supposant qu'une unité le long de l'axe-z soit égale à une unité selon l'axe-x ou l'axe-y.
Si l'attribut n'est pas spécifié, l'effet produit est comme si une valeur de 0 était spécifiée.
Animable : oui.
Attributs définis ailleurs :
%stdAttrs;.

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 >

Définitions des attributs :

x = "<nombre>"
La localisation X de la source lumineuse dans le système de coordonnées établi par l'attribut primitiveUnits sur l'élément 'filter'.
Si l'attribut n'est pas spécifié, l'effet produit est comme si une valeur de 0 était spécifiée.
Animable : oui.
y = "<nombre>"
La localisation Y de la source lumineuse dans le système de coordonnées établi par l'attribut primitiveUnits sur l'élément 'filter'.
Si l'attribut n'est pas spécifié, l'effet produit est comme si une valeur de 0 était spécifiée.
Animable : oui.
z = "<nombre>"
La localisation Z de la source lumineuse dans le système de coordonnées établi par l'attribut primitiveUnits sur l'élément 'filter', en supposant que, dans le système de coordonnées initial, l'axe-z positif se dirige vers la personne qui regarde le contenu et en supposant qu'une unité le long de l'axe-z soit égale à une unité selon l'axe-x ou l'axe-y.
Si l'attribut n'est pas spécifié, l'effet produit est comme si une valeur de 0 était spécifiée.
Animable : oui.
pointsAtX = "<nombre>"
La localisation X de la source lumineuse, dans le système de coordonnées établi par l'attribut primitiveUnits sur l'élément 'filter', du point vers lequel la source lumineuse se dirige.
Si l'attribut n'est pas spécifié, l'effet produit est comme si une valeur de 0 était spécifiée.
Animable : oui.
pointsAtY = "<nombre>"
La localisation Y de la source lumineuse, dans le système de coordonnées établi par l'attribut primitiveUnits sur l'élément 'filter', du point vers lequel la source lumineuse se dirige.
Si l'attribut n'est pas spécifié, l'effet produit est comme si une valeur de 0 était spécifiée.
Animable : oui.
pointsAtZ = "<nombre>"
La localisation Z du point vers lequel la source lumineuse se dirige, en supposant que, dans le système de coordonnées initial, l'axe-z positif se dirige vers la personne qui regarde le contenu et en supposant qu'une unité le long de l'axe-z soit égale à une unité selon l'axe-x ou l'axe-y.
Si l'attribut n'est pas spécifié, l'effet produit est comme si une valeur de 0 était spécifiée.
Animable : oui.
specularExponent = "<nombre>"
Une valeur d'exposant qui contrôle le foyer de la source lumineuse.
Si l'attribut n'est pas spécifié, l'effet produit est comme si une valeur de 1 était spécifiée.
Animable : oui.
limitingConeAngle = "<nombre>"
Un cône de délimitation qui contraint la région sur laquelle la lumière se projette. Aucune lumière n'est projetée en-dehors du cône. La valeur limitingConeAngle représente l'angle entre l'axe du faisceau de lumière (i.e., l'axe allant de la source lumineuse au point sur lequelle elle pointe) et le cone du faisceau de lumière. Les agents utilisateurs devraient appliquer des techniques de lissage, comme l'anti-crénelage, aux limites du cône.
Si aucune valeur n'est spécifiée, alors aucun cône de délimitation n'est appliqué.
Animable : oui.
Attributs définis ailleurs :
%stdAttrs;.

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

'lighting-color'
Valeur :   currentColor |
<couleur> [icc-color(<nom>[,<valeur-couleur-icc>]*)] |
inherit vf.
Valeur initiale :   white
S'applique à :   ceux des éléments 'feDiffuseLighting' et 'feSpecularLighting'
Héritée :   non
Pourcentages :   sans objet
Médias :   visuel
Animatable:   oui

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

Définitions des attributs :

mode = "normal | multiply | screen | darken | lighten"
Un des modes de mélange d'images (voir le tableau ci-dessous). La valeur par défaut est "normal".
Animable : oui.
in2 = "(voir l'attribut in)"
La seconde image en entrée de l'opération de mélange. Cet attribut prend les mêmes valeurs que l'attribut in.
Animable : oui.
Attributs définis ailleurs :
%stdAttrs;, %filter_primitive_attributes_with_in;, %PresentationAttributes-FilterPrimitives;.

Pour tous les modes de feBlend, l'opacité résultante se calcule comme suit :

qr = 1 - (1-qa)*(1-qb)

Voici les définitions qui s'appliquent aux formules de composition ci-dessous :

cr = Couleur résultante (RGB) - prémultipliée 
qa = Valeur d'opacité à un pixel donné pour l'image A
qb = Valeur d'opacité à un pixel donné pour l'image B 
ca = Couleur (RGB) à un pixel donné pour l'image A - prémultipliée 
cb = Couleur (RGB) à un pixel donné pour l'image B - prémultipliée 

Le tableau suivant donne la liste des modes de mélange d'images disponibles :

Mode de mélange d'images Formule pour le calcul de la couleur résultante
normal cr = (1 - qa) * cb + ca
multiply cr = (1-qa)*cb + (1-qb)*ca + ca*cb
screen cr = cb + ca - ca * cb
darken cr = Min ((1 - qa) * cb + ca, (1 - qb) * ca + cb)
lighten cr = Max ((1 - qa) * cb + ca, (1 - qb) * ca + cb)

Le mode de mélange 'normal' est équivalent à la spécification operator="over" sur la primitive de filtre 'feComposite', correspond à la méthode de mélange utilisée par l'élément 'feMerge' et correspond à la technique de composition alpha simple utilisée dans SVG pour toute composition en-dehors des effets de filtre.

L'exemple feBlend illustre les cinq modes de mélange.

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" 
          "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="5cm" height="5cm" viewBox="0 0 500 500"
     xmlns="http://www.w3.org/2000/svg">
  <title>Exemple feBlend - les modes de mélange feBlend</title>
  <desc>Cinq chaînes textuelles mélangées à un dégradé,
        une chaîne pour chacun des modes de mélange de feBlend.</desc>
  <defs>
    <linearGradient id="MonDegrade" gradientUnits="userSpaceOnUse"
            x1="100" y1="0" x2="300" y2="0">
      <stop offset="0" stop-color="#000000" />
      <stop offset=".33" stop-color="#ffffff" />
      <stop offset=".67" stop-color="#ff0000" />
      <stop offset="1" stop-color="#808080" />
    </linearGradient>
    <filter id="Normal">
      <feBlend mode="normal" in2="BackgroundImage" in="SourceGraphic"/>
    </filter>
    <filter id="Multiply">
      <feBlend mode="multiply" in2="BackgroundImage" in="SourceGraphic"/>
    </filter>
    <filter id="Screen">
      <feBlend mode="screen" in2="BackgroundImage" in="SourceGraphic"/>
    </filter>
    <filter id="Darken">
      <feBlend mode="darken" in2="BackgroundImage" in="SourceGraphic"/>
    </filter>
    <filter id="Lighten">
      <feBlend mode="lighten" in2="BackgroundImage" in="SourceGraphic"/>
    </filter>
  </defs>
  <rect fill="none" stroke="blue"  
        x="1" y="1" width="498" height="498"/>
  <g enable-background="new" >
    <rect x="100" y="20" width="300" height="460" fill="url(#MonDegrade)" />
    <g font-family="Verdana" font-size="75" fill="#888888" fill-opacity=".6" >
      <text x="50" y="90" filter="url(#Normal)" >Normal</text>
      <text x="50" y="180" filter="url(#Multiply)" >Multiply</text>
      <text x="50" y="270" filter="url(#Screen)" >Screen</text>
      <text x="50" y="360" filter="url(#Darken)" >Darken</text>
      <text x="50" y="450" filter="url(#Lighten)" >Lighten</text>
    </g>
  </g>
</svg>
Exemple feBlend
Exemple feBlend - les modes de 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 >

Définitions des attributs :

type = "matrix | saturate | hueRotate | luminanceToAlpha"
Indique le type d'opération de matrice. Le mot-clé matrix signifie la fourniture d'une matrice de valeurs 5x4 complète. Les autres mots-clés représentent des raccourcis pratiques qui permettent les opérations de couleur couramment employées, sans devoir spécifier une matrice complète.
Animable : oui.
values= "liste de valeurs <nombre>"
Le contenu de l'attribut values dépend de la valeur de l'attribut type :
  • Pour type="matrix", l'attribut values admet une liste de 20 valeurs de matrice (a00 a01 a02 a03 a04 a10 a11 ... a34), séparées par des blancs et/ou des virgules. Par exemple, la matrice identité pourrait s'exprimer ainsi :
    type="matrix" 
    values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"
    
  • Pour type="saturate", l'attribut values admet une seule valeur de nombre réel (de 0 à 1). Une opération saturate équivaut à la matrice suivante :
    | R' |     |0.213+0.787s  0.715-0.715s  0.072-0.072s 0  0 |   | R |
    
    | G' |     |0.213-0.213s  0.715+0.285s  0.072-0.072s 0  0 |   | G |
    
    | B' |  =  |0.213-0.213s  0.715-0.715s  0.072+0.928s 0  0 | * | B |
    
    | A' |     |           0            0             0  1  0 |   | A |
    
    | 1  |     |           0            0             0  0  1 |   | 1 |
    
  • Pour type="hueRotate", l'attribut values admet une seule valeur de nombre réel (degrés). Une opération hueRotate équivaut à la matrice suivante :
    | R' |     | a00  a01  a02  0  0 |   | R |
    
    | G' |     | a10  a11  a12  0  0 |   | G |
    
    | B' |  =  | a20  a21  a22  0  0 | * | B |
    
    | A' |     | 0    0    0    1  0 |   | A |
    
    | 1  |     | 0    0    0    0  1 |   | 1 |
    
    dans laquelle les termes a00, a01, etc. se calcule comme suit :
    | a00 a01 a02 |    [+0.213 +0.715 +0.072]
    | a10 a11 a12 | =  [+0.213 +0.715 +0.072] +
    | a20 a21 a22 |    [+0.213 +0.715 +0.072]
    
                             [+0.787 -0.715 -0.072]
    cos(valeur hueRotate) *  [-0.213 +0.285 -0.072] +
                             [-0.213 -0.715 +0.928]
    
                             [-0.213 -0.715+0.928]
    sin(valeur hueRotate) *  [+0.143 +0.140-0.283]
                             [-0.787 +0.715+0.072]
    
    Ainsi, le terme supérieur gauche de la matrice hueRotate revient à :
    .213 + cos(valeur hueRotate)*.787 - sin(valeur hueRotate)*.213
    
  • Pour type="luminanceToAlpha", l'attribut values ne s'applique pas. Une opération luminanceToAlpha équivaut à la matrice suivante :
       | R' |     |      0        0        0  0  0 |   | R |
    
       | G' |     |      0        0        0  0  0 |   | G |
    
       | B' |  =  |      0        0        0  0  0 | * | B |
    
       | A' |     | 0.2125   0.7154   0.0721  0  0 |   | A |
    
       | 1  |     |      0        0        0  0  1 |   | 1 |
    
Si l'attribut n'est pas spécifié, alors le comportement par défaut dépend de la valeur de l'attribut type. Pour type="matrix", alors, par défaut, l'attribut est la matrice identité. Pour type="saturate", alors la valeur par défaut de l'attribut est 1, ce qui revient à la matrice identité. Pour type="hueRotate", alors la valeur par défaut de l'attribut est 0, ce qui revient à la matrice identité.
Animable : oui.
Attributs définis ailleurs :
%stdAttrs;, %filter_primitive_attributes_with_in;, %PresentationAttributes-FilterPrimitives;.

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
Exemple feColorMatrix - Exemples d'opérations 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.

Définitions des attributs :

type = "identity | table | discrete | linear | gamma"

Indique le type de la fonction de transfert de la composante. Le type de la fonction détermine l'application, ou non, des autres attributs.

  • Pour la valeur identity :
    C' = C
  • Pour la valeur table, la fonction est définie par interpolation linéaire dans une table indexée [N.d.T. lookup table] par l'attribut tableValues, qui fournit une liste de n+1 valeurs (i.e., v0 à vn) pour l'identification de n plages d'interpolation. Les interpolations utilisent les formules suivantes.

    Soit une valeur C, prendre un k tel que :

    k/N <= C < (k+1)/N

    Le résultat C' est donné par :

    C' = vk + (C - k/N)*N * (vk+1 - vk)

  • Pour la valeur discrete, la fonction est définie par la fonction en escalier définie par l'attribut tableValues, qui fournit une liste de n valeurs (i.e., v0 à vn-1) pour l'identification d'une fonction en escalier consistant en n marches. La fonction en escalier est définie par les formules suivantes.

    Soit une valeur C, prendre un k tel que :

    k/N <= C < (k+1)/N

    Le résultat C' est donné par :

    C' = vk

  • Pour la valeur linear, la fonction est définie par l'équation linéaire suivante :

    C' = slope * C + intercept

  • Pour la valeur gamma, la fonction est définie par la fonction exponentielle suivante :

    C' = amplitude * pow(C, exponent) + offset

Animable : oui.
tableValues = "(liste de valeurs <nombre>)"
Quand type="table", c'est la liste des valeurs de <nombre> v0,v1,...,vn, séparées par des blancs et/ou des virgules, qui définit la table indexée. Une liste vide résulte en une fonction de transfert à l'identique.
« errata 2002-11-15 » Si l'attribut n'est pas spécifié, alors l'effet produit est comme si on avait fourni une liste vide.
Animable : oui.
slope = "<nombre>"
Quand type="linear", c'est la pente de la fonction linéaire.
Si l'attribut n'est pas spécifié, l'effet produit est comme si une valeur de 1 était spécifiée.
Animable : oui.
intercept = "<nombre>"
Quand type="linear", c'est l'interception de la fonction linéaire.
Si l'attribut n'est pas spécifié, l'effet produit est comme si une valeur de 0 était spécifiée.
Animable : oui.
amplitude = "<nombre>"
Quand type="gamma", c'est l'amplitude de la fonction gamma.
Si l'attribut n'est pas spécifié, l'effet produit est comme si une valeur de 1 était spécifiée.
Animable : oui.
exponent = "<nombre>"
Quand type="gamma", c'est l'exposant de la fonction gamma.
Si l'attribut n'est pas spécifié, l'effet produit est comme si une valeur de 1 était spécifiée.
Animable : oui.
offset = "<nombre>"
Quand type="gamma", c'est l'écart de la fonction gamma.
Si l'attribut n'est pas spécifié, l'effet produit est comme si une valeur de 0 était spécifiée.
Animable : oui.
Attributs définis ailleurs :
%stdAttrs;, %filter_primitive_attributes_with_in;, %PresentationAttributes-FilterPrimitives;.

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
Exemple feComponentTransfer - Exemples d'opérations 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 >

Définitions des attributs :

operator = "over | in | out | atop | xor | arithmetic"
L'opération de composition à effectuer. Tous les types operator, sauf arithmetic, correspondent avec les opérations décrites dans [PORTERDUFF]. L'opérateur arithmetic est décrit plus haut.
Animable : oui.
k1 = "<nombre>"
Ne s'applique que si operator="arithmetic".
Si l'attribut n'est pas spécifié, l'effet produit est comme si une valeur de "0" était spécifiée.
Animable : oui.
k2 = "<nombre>"
Ne s'applique que si operator="arithmetic".
Si l'attribut n'est pas spécifié, l'effet produit est comme si une valeur de "0" était spécifiée.
Animable : oui.
k3 = "<nombre>"
Ne s'applique que si operator="arithmetic".
Si l'attribut n'est pas spécifié, l'effet produit est comme si une valeur de "0" était spécifiée.
Animable : oui.
k4 = "<nombre>"
Ne s'applique que si operator="arithmetic".
Si l'attribut n'est pas spécifié, l'effet produit est comme si une valeur de "0" était spécifiée.
Animable : oui.
in2 = "(voir l'attribut in)"
La seconde image en entrée pour l'opération de composition. Cet attribut admet les mêmes valeurs que l'attribut in.
Animable : oui.
Attributs définis ailleurs :
%stdAttrs;, %filter_primitive_attributes_with_in;, %PresentationAttributes-FilterPrimitives;.

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
Exemple feComposite - Exemples d'opérations 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 :

RESULTX,Y = ( 
              SUMI=0 to [orderY-1] { 
                SUMJ=0 to [orderX-1] { 
                  SOURCEX-targetX+J, Y-targetY+I * kernelMatrixorderX-J-1, orderY-I-1 
                } 
              } 
            ) / divisor + bias

dans laquelle "orderX" et "orderY" représentent les valeurs X et Y pour l'attribut order, "targetX" représente la valeur de l'attribut targetX, "targetY" la valeur de l'attribut targetY, "kernelMatrix" celle de l'attribut kernelMatrix, "divisor" celle de l'attribut divisor et "bias" la valeur de l'attribut bias.

Remarquer dans la formule ci-dessus que les valeurs de la matrice noyau sont appliquées de telle manière que cette matrice noyau soit tournée de 180 degrés par rapport aux images de source et de destination, pour correspondre avec la théorie de la convolution telle qu'elle est décrite dans de nombreux ouvrages sur l'infographie.

En illustration, supposons que l'on ait une image en entrée, de 5x5 pixels, dont les valeurs de couleur pour l'un des canaux de couleur sont les suivantes :

    0  20  40 235 235
  100 120 140 235 235
  200 220 240 235 235
  225 225 255 255 255
  225 225 255 255 255

supposons que l'on définisse un noyau de convolution de 3 par 3 comme ceci :

  1 2 3
  4 5 6
  7 8 9

Examinons la valeur de couleur de la deuxième rangée deuxième colonne de l'image (la valeur du pixel source est 120). En supposons le cas le plus simple (quand le quadrillage de pixels de l'image source s'aligne parfaitement avec celui du noyau) et en supposons les valeurs par défaut des attributs divisor, targetX et targetY, alors la valeur de couleur résultange sera :

(9*  0 + 8* 20 + 7* 40 +
6*100 + 5*120 + 4*140 +
3*200 + 2*220 + 1*240) / (9+8+7+6+5+4+3+2+1)

Comme elles opèrent sur des pixels, les matrices de convolution sont de manière inhérente dépendantes de la résolution. Pour que la primitive 'feConvolveMatrix donne un résultat indépendamment de la résolution, il faut fournir une valeur explicite à l'attribut filterRes sur l'élément 'filter' et/ou bien à l'attribut kernelUnitLength.

L'attribut kernelUnitLength, conjugué aux autres attributs, définit un quadrillage de pixel dans le système de coordonnées de l'effet de filtre (i.e., le système de coordonnées établi par l'attribut primitiveUnits). Si le quadrillage de pixels établi par l'attribut kernelUnitLength n'est pas ajusté pour correspondre avec celui établi par l'attribut filterRes (implicitement ou explicitement), alors l'image en entrée sera temporairement réajustée pour faire correspondre ses pixels avec ceux établis par l'attribut kernelUnitLength. La convolution survient sur l'image re-échantillonnée. Après l'application de la convolution, l'image est re-échantillonnée en retour vers sa résolution originale.

Quand l'image doit être re-échantillonnée pour correspondre avec le système de coordonnées défini par l'attribut kernelUnitLength, préalablement à la convolution, ou bien re-échantillonnée pour correspondre au système de coordonnées de l'appareil, après la convolution, on recommande que les visionneurs de haute qualité fassent appel à des techniques d'interpolation adéquates, par exemple celles bilinéaires ou bicubiques. En fonction de la rapidité des interpolations disponibles, ce choix peut être affecté par le paramétrage de la propriété 'image-rendering'. Remarquer que les implémentations peuvent suivre des approches qui minimisent ou éliminent le re-échantillonnage, quand ce n'est pas indispensable pour obtenir un résultat correct, comme quand le document est zoomé en inverse et ainsi la valeur de l'attribut kernelUnitLength est considérablement plus petite que celle d'un pixel appareil.

<!ELEMENT feConvolveMatrix (animate|set)* >
<!ATTLIST feConvolveMatrix
  %stdAttrs;
  %PresentationAttributes-FilterPrimitives;
  %filter_primitive_attributes_with_in;
  order %NumberOptionalNumber; #REQUIRED
  kernelMatrix CDATA #REQUIRED
  divisor %Number; #IMPLIED
  bias %Number; #IMPLIED
  targetX %Integer; #IMPLIED
  targetY %Integer; #IMPLIED
  edgeMode (duplicate|wrap|none) "duplicate" 
  kernelUnitLength %NumberOptionalNumber; #IMPLIED 
  preserveAlpha %Boolean; #IMPLIED >

Définitions des attributs :

order = "<nombre-nombre-optionnel>"
Indique le nombre de cellules dans chaque dimension pour l'attribut kernelMatrix. Les valeurs fournies doivent être de type <entier> supérieures à zéro. Le premier nombre, <orderX>, indique le nombre de colonnes dans la matrice. Le second nombre, <orderY>, le nombre de rangées dans la matrice. Si la valeur <orderY> n'est pas fournie, elle prend par defaut celle de <orderX>.
Une valeur typique est order="3". On recommande de n'utiliser que des valeurs petites (par exemple, "3") ; des valeurs plus grandes peuvent aboutir à une grande surcharge de traitement et elles ne produisent pas généralement de résultats qui justifient un tel impact sur la performance.
Si l'attribut n'est pas spécifié, l'effet produit est comme si une valeur de "3" était spécifiée.
Animable : oui.
kernelMatrix = "liste de <nombre>"
La liste de valeurs <nombre> qui déterminent la matrice noyau de la convolution. Les valeurs sont séparées par des blancs et/ou des virgules. Le nombre des entrées dans la liste doit être égal à <orderX> x <orderY>.
Animable : oui.
divisor = "<nombre>"
Après l'application de l'attribut kernelMatrix sur l'image en entrée pour produire un nombre, ce nombre est divisé par la valeur de l'attribut divisor pour donner la valeur de couleur de destination finale. Un diviseur, qui est la somme de toutes les valeurs de la matrice, tend à produire un effet égalisateur sur l'intensité de la couleur d'ensemble du résultat. La spécification d'un diviseur de valeur nulle provoque une erreur. La valeur par défaut correspond à la somme de toutes les valeurs de l'attribut kernelMatrix, sauf quand la somme est zéro où le diviseur prend une valeur de "1".
Animable : oui.
bias = "<nombre>"
Après l'application de l'attribut kernelMatrix sur l'image en entrée, qui produit un nombre, et après l'application de l'attribut divisor, la valeur de l'attribut bias est ajoutée à chaque composante. Une utilisation de l'attribut bias est quand il est souhaitable d'avoir une valeur de gris de "0.5" pour une réponse nulle du filtre. Si la valeur de bias n'est pas spécifié, alors l'effet produit est comme si une valeur de zéro était spécifiée.
Animable : oui.
targetX = "<entier>"
Détermine le positionnement sur X de la matrice de convolution, par rapport à un pixel cible donné dans l'image en entrée. La colonne la plus à gauche de la matrice porte le numéro zéro. La valeur doit être telle que : 0 <= targetX < orderX. Par défaut, la matrice de convolution est centrée sur X sur chaque pixel de l'image en entrée (i.e., targetX = floor(orderX/2)).
Animable : oui.
targetY = "<entier>"
Détermine le positionnement sur Y de la matrice de convolution, par rapport à un pixel cible donné dans l'image en entrée. La rangée la plus haute de la matrice porte le numéro zéro. La valeur doit être telle que : 0 <= targetY < orderY. Par défaut, la matrice de convolution est centrée sur Y sur chaque pixel de l'image en entrée (i.e., targetY = floor(orderY/2)).
Animable : oui.
edgeMode = "duplicate | wrap | none"

Détermine l'extension nécessaire de l'image en entrée avec des valeurs de couleur, de manière à ce que les opérations de matrice puissent s'effectuer quand le noyau est positionné sur ou près du bord de l'image en entrée.

La valeur "duplicate" signifie que l'image en entrée est étendue autant que nécessaire sur chacun de ses bords en dupliquant les valeurs de couleur du bord en question de l'image en entrée.

Image originale N par M, où m = M-1 et n = N-1 :
          11 12 ... 1m 1M
          21 22 ... 2m 2M
          .. .. ... .. ..
          n1 n2 ... nm nM
          N1 N2 ... Nm NM

Étendue de deux pixels avec "duplicate" :
  11 11   11 12 ... 1m 1M   1M 1M
  11 11   11 12 ... 1m 1M   1M 1M

  11 11   11 12 ... 1m 1M   1M 1M
  21 21   21 22 ... 2m 2M   2M 2M
  .. ..   .. .. ... .. ..   .. ..
  n1 n1   n1 n2 ... nm nM   nM nM
  N1 N1   N1 N2 ... Nm NM   NM NM

  N1 N1   N1 N2 ... Nm NM   NM NM
  N1 N1   N1 N2 ... Nm NM   NM NM

La valeur "wrap" signifie que l'image en entrée est étendue en prenant les valeurs de couleur des bords opposés de l'image.

Étendue de deux pixels avec "wrap" :
  nm nM   n1 n2 ... nm nM   n1 n2
  Nm NM   N1 N2 ... Nm NM   N1 N2

  1m 1M   11 12 ... 1m 1M   11 12
  2m 2M   21 22 ... 2m 2M   21 22
  .. ..   .. .. ... .. ..   .. ..
  nm nM   n1 n2 ... nm nM   n1 n2
  Nm NM   N1 N2 ... Nm NM   N1 N2

  1m 1M   11 12 ... 1m 1M   11 12
  2m 2M   21 22 ... 2m 2M   21 22

La valeur "none" signifie que l'image en entrée est étendue en prenant des valeurs de pixel de zéro pour R, G, B et A.

Animable : oui.

kernelUnitLength = "<nombre-nombre-optionnel>"
Le premier nombre est la valeur <dx>. Le second nombre la valeur <dy>. Si la valeur de <dy> n'est pas spécifiée, elle prend par défaut la même valeur que <dx>. Indique la distance voulue, en unités du filtre courant (i.e., unités comme déterminées par la valeur de l'attribut primitiveUnits), entre des colonnes et des rangées successives, respective;ment, dans l'attribut kernelMatrix. Quand on spécifie une ou des valeurs pour l'attribut kernelUnitLength, le noyau devient défini dans un système de coordonnées abstrait et ajustable. Si la valeur de kernelUnitLength n'est pas spécifiée, la valeur par défaut est de un pixel dans l'image hors-écran, qui est un système de coordonnées basé sur des pixels et qui, de ce fait, n'est potentiellement pas ajustable. Pour un certain niveau de cohérence entre médias d'affichage et agents utilisateurs, il est nécessaire de fournir au moins une valeur pour l'un des attributs filterRes ou kernelUnitLength. Dans certaines implémentations, on obtiendra les résultats les plus cohérents et les performances les plus rapides quand le quadrillage de pixels des images hors-écran temporaires s'aligne avec celui du noyau.
Une valeur négative provoque une erreur (voir Le traitement des erreurs).
Animable : oui.
preserveAlpha = "false | true"
Une valeur de false indique que la convolution s'appliquera à tous les canaux, y compris le canal alpha.
Une valeur de true indique que la convolution ne s'appliquera qu'aux canaux de couleur. Dans ce cas, le filtre défera temporairement la prémultiplication des valeurs des composantes de couleur, appliquera le noyau et refera la prémultiplication au final.
Si la valeur de preserveAlpha n'est pas spécifiée, alors l'effet produit est comme si une valeur de false était spécifiée.
Animable : oui.
Attributs définis ailleurs :
%stdAttrs;, %filter_primitive_attributes_with_in;, %PresentationAttributes-FilterPrimitives;.

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(Ax,Ay,Az) = sqrt(Ax^2+Ay^2+Az^2)

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

Dr = kd * N.L * Lr
Dg = kd * N.L * Lg
Db = kd * N.L * Lb
Da = 1.0

dans laquelle formule :

kd = 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
Lr,Lg,Lb = 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 Ain (x,y) est :

Z (x,y) = surfaceScale * Ain (x,y)

Le vecteur normal à la surface est calculé en utilisant le filtre 3x3 de dégradé Sobel. On utilise différents noyaux de filtre selon que le pixel donné se trouve à l'intérieur ou au bord. Pour chaque cas, la formule est :

Nx (x,y)= - surfaceScale * FACTORx *
           (Kx(0,0)*I(x-dx,y-dy) + Kx(1,0)*I(x,y-dy) + Kx(2,0)*I(x+dx,y-dy) +
            Kx(0,1)*I(x-dx,y)   + Kx(1,1)*I(x,y)   + Kx(2,1)*I(x+dx,y)   +
            Kx(0,2)*I(x-dx,y+dy) + Kx(1,2)*I(x,y+dy) + Kx(2,2)*I(x+dx,y+dy))
Ny (x,y)= - surfaceScale * FACTORy *
           (Ky(0,0)*I(x-dx,y-dy) + Ky(1,0)*I(x,y-dy) + Ky(2,0)*I(x+dx,y-dy) +
            Ky(0,1)*I(x-dx,y)   + Ky(1,1)*I(x,y)   + Ky(2,1)*I(x+dx,y)   +
            Ky(0,2)*I(x-dx,y+dy) + Ky(1,2)*I(x,y+dy) + Ky(2,2)*I(x+dx,y+dy))
Nz (x,y) = 1.0

N = (Nx, Ny, Nz) / Norm((Nx,Ny,Nz))

Dans ces formules, les valeurs dx et dy (par exemple, I(x-dx,y-dy)), représentent les deltas relatifs à une position (x,y) donnée, pour l'estimation de la pente de la surface en ce point. Ces deltas sont déterminés par la valeur (explicite ou implicite) de l'attribut kernelUnitLength.

Coin supérieur gauche :

FACTORx=2/(3*dx)
Kx =
    |  0  0  0 |
    |  0 -2  2 |
    |  0 -1  1 |

FACTORy=2/(3*dy)
Ky =  
    |  0  0  0 |
    |  0 -2 -1 |
    |  0  2  1 |

Rangée supérieure :

FACTORx=1/(3*dx)
Kx =
    |  0  0  0 |
    | -2  0  2 |
    | -1  0  1 |

FACTORy=1/(2*dy)
Ky =  
    |  0  0  0 |
    | -1 -2 -1 |
    |  1  2  1 |

Coin supérieur droit :

FACTORx=2/(3*dx)
Kx =
    |  0  0  0 |
    | -2  2  0 |
    | -1  1  0 |

FACTORy=2/(3*dy)
Ky =  
    |  0  0  0 |
    | -1 -2  0 |
    |  1  2  0 |

Colonne de gauche :

FACTORx=1/(2*dx)
Kx =
    | 0 -1  1 |
    | 0 -2  2 |
    | 0 -1  1 |

FACTORy=1/(3*dy)
Ky =  
    |  0 -2 -1 |
    |  0  0  0 |
    |  0  2  1 |

Pixels intérieurs :

FACTORx=1/(4*dx)
Kx =
    | -1  0  1 |
    | -2  0  2 |
    | -1  0  1 |

FACTORy=1/(4*dy)
Ky =  
    | -1 -2 -1 |
    |  0  0  0 |
    |  1  2  1 |

Colonne de droite :

FACTORx=1/(2*dx)
Kx =
    | -1  1  0|
    | -2  2  0|
    | -1  1  0|

FACTORy=1/(3*dy)
Ky =  
    | -1 -2  0 |
    |  0  0  0 |
    |  1  2  0 |

Coin inférieur gauche :

FACTORx=2/(3*dx)
Kx =
    | 0 -1  1 |
    | 0 -2  2 |
    | 0  0  0 |

FACTORy=2/(3*dy)
Ky =  
    |  0 -2 -1 |
    |  0  2  1 |
    |  0  0  0 |

Rangée inférieure :

FACTORx=1/(3*dx)
Kx =
    | -1  0  1 |
    | -2  0  2 |
    |  0  0  0 |

FACTORy=1/(2*dy)
Ky =  
    | -1 -2 -1 |
    |  1  2  1 |
    |  0  0  0 |

Coin inférieur droit :

FACTORx=2/(3*dx)
Kx =
    | -1  1  0 |
    | -2  2  0 |
    |  0  0  0 |

FACTORy=2/(3*dy)
Ky =  
    | -1 -2  0 |
    |  1  2  0 |
    |  0  0  0 |

L, le vecteur unitaire de l'échantillon d'image vers la lumière, se calcule comme suit :

Pour les sources lumineuses infinies, il est constant :

Lx = cos(azimuth)*cos(elevation)
Ly = sin(azimuth)*cos(elevation)
Lz = sin(elevation)

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

Lx = Lightx - x
Ly = Lighty - y
Lz = Lightz - Z(x,y)

L = (Lx, Ly, Lz) / Norm(Lx, Ly, Lz)

dans laquelle Lightx, Lighty et Lightz est la position de la lumière en entrée.

Lr,Lg,Lb, le vecteur de couleur de la lumière, est une fonction de position seulement dans le cas d'un éclairage spot :

Lr = Lightr*pow((-L.S),specularExponent)
Lg = Lightg*pow((-L.S),specularExponent)
Lb = Lightb*pow((-L.S),specularExponent)

dans laquelle S est le vecteur unitaire allant de la lumière vers le point (pointsAtX, pointsAtY, pointsAtZ) dans le plan x-y :

Sx = pointsAtX - Lightx
Sy = pointsAtY - Lighty
Sz = pointsAtZ - Lightz

S = (Sx, Sy, Sz) / Norm(Sx, Sy, Sz)

Si L.S est positif, il n'y a pas de lumière. (Lr = Lg = Lb = 0)

<!ELEMENT feDiffuseLighting ((feDistantLight|fePointLight|feSpotLight),(animate|set|animateColor)*) >
<!ATTLIST feDiffuseLighting
  %stdAttrs;
  class %ClassList; #IMPLIED
  style %StyleSheet; #IMPLIED
  %PresentationAttributes-Color;
  %PresentationAttributes-FilterPrimitives;
  %PresentationAttributes-LightingEffects;
  %filter_primitive_attributes_with_in;
  surfaceScale %Number; #IMPLIED
  diffuseConstant %Number; #IMPLIED 
  kernelUnitLength %NumberOptionalNumber; #IMPLIED >

Définitions des attributs :

surfaceScale = "<nombre>"
hauteur de la surface quand Ain = 1.
Si l'attribut n'est pas spécifié, l'effet produit est comme si une valeur de 1 était spécifiée.
Animable : oui.
diffuseConstant = "<nombre>"
kd dans un modèle d'éclairage Phong. En SVG, ceci peut être tout nombre non négatif.
Si l'attribut n'est pas spécifié, l'effet produit est comme si une valeur de 1 était spécifiée.
Animable : oui.
kernelUnitLength = "<nombre-nombre-optionnel>"
Le premier nombre est la valeur de <dx>. Le second nombre la valeur de <dy>. Si la valeur <dy> n'est pas spécifiée, elle prend la même valeur que <dx>. Indique la distance voulue en unités du filtre courant (i.e., les unités comme déterminées par la valeur de l'attribut primitiveUnits) pour dx et dy, respectivement, dans les formules de calcul normales de surface. En spécifiant une ou des valeurs pour l'attribut kernelUnitLength, le noyau devient défini dans un système de coordonnées abstrait ajustable. Si kernelUnitLength n'est pas spécifié, les valeurs de dx et de dy devraient représenter des deltas très petits par rapport à une position (x,y) donnée, ce qui pourrait être implémenté dans certains cas par un pixel dans l'image intermédiaire hors-écran pixélisée, qui est un système de coordonnées basé sur des pixels et qui est ainsi potentiellement non ajustable. Pour une certaine cohérence entre médias d'affichage et agents utilisateurs, il est nécessaire que soit fournie une valeur pour au moins l'un des attributs filterRes et kernelUnitLength. Les considérations sur les images intermédiaires se trouvent dans la section Introduction et dans la description de l'attribut filterRes.
Une valeur négative provoque une erreur (voir Le traitement des erreurs).
Animable : oui.
Attributs définis ailleurs :
%stdAttrs;, %filter_primitive_attributes_with_in;, %PresentationAttributes-Color;, %PresentationAttributes-FilterPrimitives;, %PresentationAttributes-LightingEffects;.

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

Définitions des attributs :

scale = "<nombre>"
Le facteur d'échelle de déplacement. Cette quantité s'exprime dans le système de coordonnées établi par l'attribut primitiveUnits sur l'élément 'filter'.
Quand la valeur de l'attribut est 0, cette opération n'a aucun effet sur l'image source.
Si l'attribut n'est pas spécifié, l'effet produit est comme si une valeur de 0 était spécifiée.
Animable : oui.
xChannelSelector = "R | G | B | A"
Indique quel canal de l'image de l'attribut in2 utiliser pour déplacer les pixels de l'image de l'attribut in sur l'axe-x.
Animable : oui.
yChannelSelector = "R | G | B | A"
Indique quel canal de l'image de l'attribut in2 utiliser pour déplacer les pixels de l'image de l'attribut in sur l'axe-y.
Animable : oui.
in2 = "(voir l'attribut in)"
La seconde image en entrée, qui est utilisée pour déplacer les pixels de l'image de l'attribut in. Cet attribut peut prendre les mêmes valeurs que l'attribut in.
Animable : oui.
Attributs définis ailleurs :
%stdAttrs;, %filter_primitive_attributes_with_in;, %PresentationAttributes-FilterPrimitives;.

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; >
Attributs définis ailleurs :
%stdAttrs;, %filter_primitive_attributes_with_in;, class, style, %PresentationAttributes-Color;, %PresentationAttributes-feFlood;, %PresentationAttributes-FilterPrimitives;.

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

'flood-color'
Valeur :   currentColor |
<couleur> [icc-color(<nom>[,<valeur-couleur-icc>]*)] |
inherit vf.
Valeur initiale :   black
S'applique à :   ceux des éléments 'feFlood'
Héritée :   non
Pourcentages :   sans objet
Médias :   visuel
Animatable:   oui

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

'flood-opacity'
Valeur :   <valeur-alpha> | inherit vf. « errata 2002-06-06 »
Valeur initiale :   1
S'applique à :   ceux des éléments'feFlood'
Héritée :   non
Pourcentages :   sans objet
Médias :   visuel
Animatable:   oui

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(-x2/ (2s2)) / sqrt(2* pi*s2)

dans laquelle 's' est la déviation standard spécifiée par l'attribut stdDeviation.

La valeur de l'attribut stdDeviation peut consister d'un ou de deux nombres. Si on fournit deux nombres, le premier représente une valeur de déviation standard le long de l'axe-x du système de coordonnées courant et le second une déviation standard sur l'axe-y. Si un seul nombre est fourni, alors cette valeur est utilisée pour X et Y.

Même si une seule valeur est fournie pour l'attribut stdDeviation, on peut implémenter ceci comme une convolution à part.

Pour des valeurs de 's' plus grandes (s >= 2.0), on peut utiliser une approximation : trois flous de boîte successifs construisent un noyau de convolution du second degré au niveau de la pièce, ce qui donne une approximation du noyau gaussien d'à-peu-près 3%.

soit d = floor(s * 3*sqrt(2*pi)/4 + 0.5)

... si d est impair, utiliser trois flous de boîte de taille 'd', centrés sur le pixel de sortie.

... si d est pair, utiliser deux flous de boîte de taille 'd' (le premier centré sur la limite du pixel entre le pixel de sortie et celui de gauche, le second centré sur la limite du pixel entre le pixel de sortie et celui de droite) et un flou de boîte de taille 'd+1' centré sur le pixel de sortie.

Fréquemment, cette opération interviendra sur des images alpha seul, comme celles produites pour l'entrée intégrée SourceAlpha. L'implémentation peut en tenir compte et optimiser ce cas avec un seul canal. Si l'entrée est de dimension infinie et si elle est constante, cette opération ne produit aucun effet. Si l'entrée est de dimension infinie et si elle est une mosaïque, le filtre est évalué selon des conditions de limite périodiques.

<!ELEMENT feGaussianBlur (animate|set)* >
<!ATTLIST feGaussianBlur
  %stdAttrs;
  %PresentationAttributes-FilterPrimitives;
  %filter_primitive_attributes_with_in;
  stdDeviation %NumberOptionalNumber; #IMPLIED >

Définitions des attributs :

stdDeviation = "<nombre-nombre-optionnel>"
La déviation standard pour l'opération de flou. Si deux valeurs <nombre> sont fournies, la première représente une déviation standard sur l'axe-x dans le système de coordonnées établi par l'attribut primitiveUnits sur l'élément 'filter'. La seconde valeur représente une déviation standadr sur l'axe-y. Si on ne fournit qu'un nombre, alors il est utilisé pour les axes X et Y.
Une valeur négative provoque une erreur (voir Le traitement des erreurs). Une valeur de zéro désactive l'effet de la primitive de filtre donnée (i.e., le résultat est une image noire transparente).
Si l'attribut n'est pas spécifié, l'effet produit est comme si une valeur de 0 était spécifiée.
Animable : oui.
Attributs définis ailleurs :
%stdAttrs;, %filter_primitive_attributes_with_in;, %PresentationAttributes-FilterPrimitives;.

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; >
Attributs définis ailleurs :
%stdAttrs;, %xlinkRefAttrsEmbed;, xlink:href, %langSpaceAttrs;, externalResourcesRequired, class, style, %PresentationAttributes-All;, %filter_primitive_attributes;.

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 >
Attributs définis ailleurs :
%stdAttrs;, %filter_primitive_attributes;, in, %PresentationAttributes-FilterPrimitives;.

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 >

Définitions des attributs :

operator = "erode | dilate"
Un mot-clé qui indique s'il faut éroder (i.e., amincir) ou dilater (i.e., épaissir) le graphique source.
Animable : oui.
radius = "<nombre-nombre-optionnel>"
Le ou les rayons de l'opération. Si deux valeurs de <nombre> sont fournies, la première représente un rayon-x et la seconde un rayon-y. Si un seul nombre est fourni, alors cette valeur est utilisée pour X et Y. Les valeurs sont dans le système de coordonnées établi par l'attribut primitiveUnits sur l'élément 'filter'.
Une valeur négative provoque une erreur (voir Le traitement des erreurs). Une valeur de zéro désactive l'effet de la primitive de filtre donnée (i.e., le résultat est une image noire transparente).
Si l'attribut n'est pas spécifié, l'effet produit est comme si une valeur de 0 était spécifiée.
Animable : oui.
Attributs définis ailleurs :
%stdAttrs;, %filter_primitive_attributes_with_in;, %PresentationAttributes-FilterPrimitives;.

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
Exemple feMorphology - Exemples avec les valeurs erode et dilate

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 >

Définitions des attributs :

dx = "<nombre>"
La quantité de décalage du graphique en entrée dans l'axe-x. Cette quantité s'exprime dans le système de coordonnées établi par l'attribut primitiveUnits sur l'élément 'filter'.
Si l'attribut n'est pas spécifié, l'effet produit est comme si une valeur de 0 était spécifiée.
Animable : oui.
dy = "<nombre>"
La quantité de décalage du graphique en entrée dans l'axe-y. Cette quantité s'exprime dans le système de coordonnées établi par l'attribut primitiveUnits sur l'élément 'filter'.
Si l'attribut n'est pas spécifié, l'effet produit est comme si une valeur de 0 était spécifiée.
Animable : oui.
Attributs définis ailleurs :
%stdAttrs;, %filter_primitive_attributes_with_in;, %PresentationAttributes-FilterPrimitives;.

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 :

Sr = ks * pow(N.H, specularExponent) * Lr
Sg = ks * pow(N.H, specularExponent) * Lg
Sb = ks * pow(N.H, specularExponent) * Lb
Sa = max(Sr, Sg, Sb)

dans laquelle formule :

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

Lr,Lg,Lb = composantes RGB de la lumière

Voir l'élément 'feDiffuseLighting' pour les définitions de N et (Lr, Lg, Lb).

La définition de H reflète notre hypothèse du vecteur de l'œil constant E = (0,0,1) :

H = (L + E) / Norm(L+E)

dans laquelle L est le vecteur unitaire de lumière.

À la différence de 'feDiffuseLighting', le filtre 'feSpecularLighting' produit une image non opaque. Ceci est dû au fait que le résultat spéculaire (Sr,Sg,Sb,Sa) est destiné à se rajouter à l'image texturée. Le canal alpha du résultat est égal au maximum des composantes de couleur, ainsi quand la lumière spéculaire est de zéro, aucune couverture supplémentaire ne vient se rajouter à l'image et une haute lumière complètement blanche ajoutera de l'opacité.

Les filtres 'feDiffuseLighting' et 'feSpecularLighting' seront souvent utilisés conjointement. Une implémentation peut en tenir compte et calculer les deux cartes en une seule passe au lien de deux.

<!ELEMENT feSpecularLighting ((feDistantLight|fePointLight|feSpotLight),(animate|set|animateColor)*) >
<!ATTLIST feSpecularLighting
  %stdAttrs;
  class %ClassList; #IMPLIED
  style %StyleSheet; #IMPLIED
  %PresentationAttributes-Color;
  %PresentationAttributes-FilterPrimitives;
  %PresentationAttributes-LightingEffects;
  %filter_primitive_attributes_with_in;
  surfaceScale %Number; #IMPLIED
  specularConstant %Number; #IMPLIED
  specularExponent %Number; #IMPLIED 
  kernelUnitLength %NumberOptionalNumber; #IMPLIED >

Définitions des attributs :

surfaceScale = "<nombre>"
hauteur de la surface quand Ain = 1.
Si l'attribut n'est pas spécifié, l'effet produit est comme si une valeur de 1 était spécifiée.
Animable : oui.
specularConstant = "<nombre>"
ks dans le modèle d'éclairage Phong. En SVG, ceci peut être tout nombre non négatif.
Si l'attribut n'est pas spécifié, l'effet produit est comme si une valeur de 1 était spécifiée.
Animable : oui.
specularExponent = "<nombre>"
L'exposant pour le terme spéculaire, plus la valeur est grande plus ça « brille ». Dans une plage de 1.0 à 128.0.
Si l'attribut n'est pas spécifié, l'effet produit est comme si une valeur de 1 était spécifiée.
Animable : oui.
Attributs définis ailleurs :
%stdAttrs;, %filter_primitive_attributes_with_in;, kernelUnitLength, %PresentationAttributes-Color;, %PresentationAttributes-FilterPrimitives;, %PresentationAttributes-LightingEffects;.

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; >
Attributs définis ailleurs :
%stdAttrs;, %filter_primitive_attributes_with_in;, %PresentationAttributes-FilterPrimitives;.

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

Définitions des attributs :

baseFrequency = "<nombre-nombre-optionnel>"
Le ou les paramètres de fréquence de base pour la fonction de bruit. Si deux valeurs de <nombre> sont fournies, la première représente une fréquence de base dans la direction de X et la seconde dans la direction de Y. Si un seul nombre est fourni, alors cette valeur est utilisée pour X et Y.
Une valeur négative pour une fréquence de base provoque une erreur (voir Le traitement des erreurs).
Si l'attribut n'est pas spécifié, l'effet produit est comme si une valeur de 0 était spécifiée.
Animable : oui.
numOctaves = "<entier>"
Le paramètre numOctaves pour la fonction de bruit.
Si l'attribut n'est pas spécifié, l'effet produit est comme si une valeur de 1 était spécifiée.
Animable : oui.
seed = "<nombre>"
Le nombre de départ pour le générateur de nombres pseudo-aléatoires.
Si l'attribut n'est pas spécifié, l'effet produit est comme si une valeur de 0 était spécifiée.
Animable : oui.
stitchTiles = "stitch | noStitch"
Pour la spécification stitchTiles="noStitch", aucune tentative n'est faite pour obtenir des transitions progressives aux bords des carreaux contenant une fonction turbulence. Parfois, cela aboutira à des discontinuités flagrantes aux bords des carreaux.
Pour une spécification stitchTiles="stitch", alors l'agent utilisateur ajustera automatiquement les valeurs baseFrequency-x et baseFrequency-y de telle façon que la largeur et la hauteur du nœud feTurbulence (i.e., la largeur et la hauteur de la sous-région courante) contiennent un nombre entier pour la largeur et la hauteur du carreau Perlin pour la première octave. La valeur baseFrequency sera ajustée en hausse ou en baisse, selon le choix qui amène le plus petit changement relatif (pas absolu), comme suit : la fréquence donnée, calculer lowFreq=floor(width*frequency)/width et hiFreq=ceil(width*frequency)/width. Si frequency/lowFreq < hiFreq/frequency, alors utiliser lowFreq, sinon utiliser hiFreq. Lors de la génération des valeurs de turbulence, générer les vecteurs du treillis normalement pour un bruit Perlin, sauf pour ceux des points du treillis qui se situent aux bords de droite ou du bas de l'aire active (la taille du carreau résultant). Dans ces cas, copier le vecteur de treillis à partir du côté opposé de l'aire active.
Animable : oui.
type = "fractalNoise | turbulence"
Indique si la primitive de filtre devrait effectuer une fonction de bruit ou une fonction de turbulence.
Animable : oui.
Attributs définis ailleurs :
%stdAttrs;, %filter_primitive_attributes;, %PresentationAttributes-FilterPrimitives;.

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
Exemple feTurbulence - Exemples d'opérations 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.