4 septembre 2001

7 Les systèmes de coordonnées, les transformations et les unités


Contenu


 

7.1 Introduction

Pour tous les médias, le canevas SVG décrit « l'espace où le contenu SVG est rendu ». Le canevas est infini dans chaque dimension de l'espace, mais le rendu s'effectue par rapport à une région rectangulaire finie du canevas. Cet région rectangulaire finie est appelée la zone de visualisation SVG. Pour les médias visuels [CSS2-VISUAL vf.], la zone de visualisation SVG est l'aire de visualisation dans laquelle l'utilisateur voit le contenu SVG.

La taille de la zone de visualisation SVG (i.e., sa largeur et sa hauteur) est déterminée au cours d'un processus de négociation (voir le chapitre La zone de visualisation initiale) entre le fragment de document SVG et son parent (réel ou implicite). Une fois ce processus achevé, l'agent utilisateur SVG reçoit les informations suivantes :

À de ces informations, l'agent utilisateur SVG détermine la zone de visualisation, un système de coordonnées de la zone de visualisation initial et un système de coordonnées utilisateur initial, de manière à ce que les deux systèmes de coordonnées soient identiques. Ces deux systèmes de coordonnés sont établis de telle manière que leurs origines coïncident avec celui de la zone de visualisation (pour la zone de visualisation racine, l'origine se confond avec le coin supérieur gauche) et qu'une unité du système de coordonnées initial équivale à un « pixel » dans la zone de visualisation. (Voir le chapitre Le système de coordonnées initial). On appelle également le système de coordonnées de la zone de visualisation espace de la zone de visualisation et le système de coordonnées utilisateur espace utilisateur.

En SVG, on peut sp&eacue;cifier les longueurs comme :

Les identifiants d'unités de longueur reconnus sont : em, ex, px, pt, pc, cm, mm, in et les pourcentages.

Un nouvel espace utilisateur (i.e., un nouveau système de coordonnées courant) peut être établi à tout endroit dans un fragment de document SVG en spécifiants des transformations prenant la forme de matrices de transformation ou d'opérations de transformation simples telles que rotations, inclinaisons, mises à l'échelle et translations. L'établissement de nouveaux espaces utilisateurs via des transformations du système de coordonnées est une opération fondamentale des graphiques en 2D et représente la méthode habituelle pour le contrôle de la taille, la position, la rotation et l'inclinaison des objets graphiques.

On peut aussi établir des nouvelles zone de visualisation. En établissant une nouvelle zone de visualisation-, on peut redéfinir la signification des unités en pourcentage et produire un nouveau rectangle de référence pour le « logement » d'un graphique dans une aire rectangulaire particulière. (« Loger » signifie qu'un graphique donné est transformé de telle façon que sa boîte englobante dans l'espace utilisateur s'aligne exactement sur les bords d'une zone de visualisation donnée).

7.2 La zone de visualisation initiale

L'agent utilisateur SVG négocie avec son agent utilisateur parent pour déterminer la zone de visualisation dans laquelle il pourra rendre le document. Dans certaines circonstances, le contenu SVG sera incorporé (par référence ou bien en ligne) dans un document conteneur. Ce document conteneur peut inclure des attributs, des propriétés et/ou d'autres paramètres (explicites ou implicites) qui spécifient ou donnent des indices sur les dimensions de la zone de visualisation pour le contenu SVG. Ce contenu SVG à son tour peut fournir des indications sur la région appropriée de la zone de visualisation pour lui-même via les attributs XML width et height de l'élément 'svg' le plus externe. Le processus de négociation exploite toutes les informations fournies par le document conteneur et le contenu SVG lui-même pour le choix de l'emplacement et de la taille de la zone de visualisation.

L'attribut width de l'élément 'svg' le plus externe établit la largeur de la zone de visualisation, à moins de rencontrer les conditions suivantes :

Sous ces conditions, les propriétés de positionnement établissent la largeur de la zone de visualisation.

De la même façon, si des propriétés de positionnement [CSS2-POSN vf.] ont été spécifiées sur l'élément appelant, ou sur l'élément 'svg' le plus externe, suffisantes pour l'établissement de la hauteur de la zone de visualisation, alors celles-ci établissent la hauteur de la zone de visualisation ; sinon, c'est l'attribut height de l'élément 'svg' le plus externe qui établit cette hauteur.

Si les attributs width ou height de l'élément 'svg' le plus externe sont exprimées en unités utilisateur (i.e., aucun identifiant d'unité n'a été fourni), alors la valeur est sensée être équivalente au même nombre d'unités « px » (voir le chapitre Les unités).

Dans l'exemple suivant, un graphique SVG est incorporé en ligne dans un document XML parent mis en forme avec des règles de disposition CSS. Comme les propriétés de positionnement CSS ne sont pas indiquées sur l'élément 'svg' le plus externe, Ce sont les attributs width = "100px" et height = "200px" qui déterminent la taille de la zone de visualisation initiale :

<?xml version="1.0" standalone="yes"?>
<parent xmlns="http://some.url">
   
   <!-- Un graphique SVG -->
   <svg xmlns='http://www.w3.org/2000/svg'
      width="100px" height="200px">
      <path d="M100,100 Q200,400,300,100"/>
      <!-- Le reste du graphique SVG viendrait ici -->
   </svg>   
   
</parent>

Le tracé de rognage initial du fragment de document SVG est établi selon les règles décrites au chapitre Le tracé de rognage initial.


7.3 Le système de coordonnées initial

Pour l'élément 'svg' le plus externe, l'agent utilisateur SVG détermine un système de coordonnées initial de la zone de visualisation et un système de coordonnées utilisateur initial, de telle façon que les deux systèmes de coordonnées soient identiques. L'origine des deux systèmes de coordonnées coïcident avec celle de la zone de visualisation et une unité, dans le système de coordonnées initial, équivaut à un « pixel (i.e., une unité px, comme défini dans [Les longueurs en CSS2 vf.]) dans la zone de visualisation. Dans la plupart des cas, de tels documents SVG autonomes ou fragments de document SVG incorporés (par référence ou en ligne) dans des documents XML parents, où la disposition du parent est déterminée par CSS [CSS2 vf.] ou XSL [XSL vf.], le système de coordonnées initial de la zone de visualisation (et par là-même le système de coordonnées utilisateur initial) a pour origine le coin supérieur gauche de la zone de visualisation, le sens positif de l'axe-x étant vers la droite, le sens positif de l'axe-y vers le bas et le texte rendu ayant une orientation « verticale », ce qui signifie que les glyphes sont orientés de telle manière que les caractères romans et ceux idéographiques en pleine taille des écritures asiatiques ont le bord haut de leurs glyphes correspondants orientés vers le haut et le bord droit de leurs glyphes correspondants orientés vers la droite.

Si l'implémentation SVG fait partie d'un agent utilisateur qui gère le style des documents XML, en utilisant des unités px compatibles avec CSS2, alors l'agent utilisateur SVG devrait obtenir sa valeur initiale de la taille d'une unité px en unités physiques réelles pour que cette valeur corresponde avec celle utilisée pour les autres opérations de style XML ; sinon, si l'agent utilisateur peut déterminer la taille d'une unité px à partir de son environnement, il devrait utiliser cette valeur ; autrement, il devrait choisir une taille adéquate pour une unité de px. Dans tous les cas, la taille d'un px doit être conforme aux règles décrites dans [Les longueurs en CSS2 vf.].

L'exemple CoordInit ci-dessous montre le système de coordonnées initial ayant son origine au coin supérieur gauche avec l'axe-x vers la droite et l'axe-y vers le bas. Le système de coordonnées utilisateur initial a une unité utilisateur égale à un « pixel » du parent (implicite ou explicite) de l'agent utilisateur.

<?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="300px" height="100px"
     xmlns="http://www.w3.org/2000/svg">
  <desc>Exemple CoordInit - Le système de coordonnées initial de SVG</desc>

  <g fill="none" stroke="black" stroke-width="3" >
    <line x1="0" y1="1.5" x2="300" y2="1.5" />
    <line x1="1.5" y1="0" x2="1.5" y2="100" />
  </g>
  <g fill="red" stroke="none" >
    <rect x="0" y="0" width="3" height="3" />
    <rect x="297" y="0" width="3" height="3" />
    <rect x="0" y="97" width="3" height="3" />
  </g>
  <g font-size="14" font-family="Verdana" >
    <text x="10" y="20">(0,0)</text>
    <text x="240" y="20">(300,0)</text>
    <text x="10" y="90">(0,100)</text>
  </g>
</svg>
Exemple CoordonnéesInitiales
Exemple CoordonnéesInitiales - Système de coordonnées initial de SVG

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


7.4 Les transformations du système de coordonnées

On peut établir un nouvel espace utilisateur (i.e., un nouveau système de coordonnées courant) en spécifiant des transformations, sous la forme d'un attribut transform sur un élément conteneur ou un élément graphique, ou d'un attribut viewBox sur un élément 'svg', 'symbol', 'marker', 'pattern' ou 'view' Les attributs transform et viewBox transforme les coordonnées de l'espace utilisateur et les longueurs des attributs frères sur l'élément donné (voir l'effet de l'attribut transform sur les attributs frères et l'effet de l'attribut viewBox sur les attributs frères) et sur tous ses descendants. Les transformations peuvent être imbriquées, auquel cas l'effet des transformations est cumulatif.

L'exemple SysCoordOrig ci-dessous montre un document sans transformation. La chaîne textuelle est spécifiée dans le système de coordonnées initial.

<?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="400px" height="150px"
     xmlns="http://www.w3.org/2000/svg">
  <desc>Exemple SysCoordOrig - Transformations simples : image originale</desc>
  <g fill="none" stroke="black" stroke-width="3" >
    <!-- Dessine les axes du système de coordonnées original -->
    <line x1="0" y1="1.5" x2="400" y2="1.5" />
    <line x1="1.5" y1="0" x2="1.5" y2="150" />
  </g>
  <g>
    <text x="30" y="30" font-size="20" font-family="Verdana" >
      ABC (syst. coord. orig.)
    </text>
  </g>
</svg>

Exemple SysCoordOrig
Exemple SysCoordOrig - Système de coordonnées original de SVG

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

L'exemple NouvSysCoord établit un nouveau système de coordonnées utilisateur en spécifiant transform = "translate(50,50)" sur le troisième élément 'g' ci-dessous. L'origine du nouveau système de coordonnées utilisateur a pour situation (50,50) dans le système de coordonnées original. En conséquence de cette transformation, le point de coordonnées (30,30) dans le nouveau système de coordonnées utilisateur correspond au point de coordonnées (80,80) dans le système de coordonnées original (i.e., les coordonnées ont subis une translation de 50 unités sur X et 50 unités sur Y).

<?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="400px" height="150px"
     xmlns="http://www.w3.org/2000/svg">
  <desc>Exemple NouvSysCoord - Nouveau système de coordonnées utilisateur</desc>
  <g fill="none" stroke="black" stroke-width="3" >
    <!-- Dessine les axes du système de coordonnées original -->
    <line x1="0" y1="1.5" x2="400" y2="1.5" />
    <line x1="1.5" y1="0" x2="1.5" y2="150" />
  </g>
  <g>
    <text x="30" y="30" font-size="20" font-family="Verdana" >
      ABC (sys. coord. orig.)
    </text>
  </g>
  <!-- Établit un nouveau système de coordonnées, qui est
       déplacé (i.e., subit une translation) à partir du système
       de coordonnées initial de 50 unités utilisateur sur chaque axe. -->
  <g transform="translate(50,50)">
    <g fill="none" stroke="red" stroke-width="3" >
      <!-- Dessine des lignes de longueur 50 unités utilisateur le long 
           des axes du nouveau système de coordonnées -->
      <line x1="0" y1="0" x2="50" y2="0" stroke="red" />
      <line x1="0" y1="0" x2="0" y2="50" />
    </g>
    <text x="30" y="30" font-size="20" font-family="Verdana" >
      ABC (sys. coord. trans.)
    </text>
  </g>
</svg>
Exemple NouvSysCoord
Exemple NourSysCoord - Nouveau système de coordonnées utilisateur

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

L'exemple RotationEchelle illustre une rotation et un changement d'échelle qui sont des transformations simples :

<?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="400px" height="120px"
     xmlns="http://www.w3.org/2000/svg">
  <desc>Exemple RotationEchelle - Rotation et changement d'échelle</desc>
  <g fill="none" stroke="black" stroke-width="3" >
    <!-- Dessine les axes du système de coordonnées original -->
    <line x1="0" y1="1.5" x2="400" y2="1.5" />
    <line x1="1.5" y1="0" x2="1.5" y2="120" />
  </g>
  <!-- Établit un nouveau système de coordonnées, dont l'origine est (50,30)
       dans le syst. coord. initial et qui est tourné de 30 degrés. -->
  <g transform="translate(50,30)">
    <g transform="rotate(30)">
      <g fill="none" stroke="red" stroke-width="3" >
        <line x1="0" y1="0" x2="50" y2="0" />
        <line x1="0" y1="0" x2="0" y2="50" />
      </g>
      <text x="0" y="0" font-size="20" font-family="Verdana" fill="blue" >
        ABC (rotate)
      </text>
    </g>
  </g>
  <!-- Établit un nouveau système de coordonnées, dont l'origine est (200,40)
       dans le syst. coord. initial et qui reçoit un facteur d'échelle de 1.5. -->
  <g transform="translate(200,40)">
    <g transform="scale(1.5)">
      <g fill="none" stroke="red" stroke-width="3" >
        <line x1="0" y1="0" x2="50" y2="0" />
        <line x1="0" y1="0" x2="0" y2="50" />
      </g>
      <text x="0" y="0" font-size="20" font-family="Verdana" fill="blue" >
        ABC (scale)
      </text>
    </g>
  </g>
</svg>
Exemple RotationEchelle
Exemple RotationEchelle - Transformations en rotation et en changement d'échelle

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

L'exemple Inclinaison définit deux systèmes de coordonnées qui sont inclinés par rapport au système de coordonnées d'origine.

<?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="400px" height="120px"
     xmlns="http://www.w3.org/2000/svg">
  <desc>Exemple Inclinaison - Montre les effets de skewX et skewY</desc>
  <g fill="none" stroke="black" stroke-width="3" >
    <!-- Dessine les axes du système de coordonnées original -->
    <line x1="0" y1="1.5" x2="400" y2="1.5" />
    <line x1="1.5" y1="0" x2="1.5" y2="120" />
  </g>
  <!-- Établit un nouveau système de coordonnées, dont l'origine est (30,30)
       dans le syst. coord. initial et qui est incliné de 30 degrés sur X. -->
  <g transform="translate(30,30)">
    <g transform="skewX(30)">
      <g fill="none" stroke="red" stroke-width="3" >
        <line x1="0" y1="0" x2="50" y2="0" />
        <line x1="0" y1="0" x2="0" y2="50" />
      </g>
      <text x="0" y="0" font-size="20" font-family="Verdana" fill="blue" >
        ABC (skewX)
      </text>
    </g>
  </g>
  <!-- Établit un nouveau système de coordonnées, dont l'origine est (200,30)
       dans le syst. coord. initial et qui est incliné de 30 degrés sur Y. -->
  <g transform="translate(200,30)">
    <g transform="skewY(30)">
      <g fill="none" stroke="red" stroke-width="3" >
        <line x1="0" y1="0" x2="50" y2="0" />
        <line x1="0" y1="0" x2="0" y2="50" />
      </g>
      <text x="0" y="0" font-size="20" font-family="Verdana" fill="blue" >
        ABC (skewY)
      </text>
    </g>
  </g>
</svg>
Exemple Inclinaison
Exemple Inclinaison - Montre les effets de skewX et skewY

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

Mathématiquement, on peut représenter toutes les transformations comme des matrices de transformation 3x3 de la forme suivante :
      Matrice de transformation 3 par 3

Comme on n'utilise que six valeurs dans la matrice 3x3 ci-dessus, une matrice de transformation s'exprime également comme un vecteur : [a b c d e f].

Les transformations font correspondre les coordonnées et les longueurs d'un système de coordonnées précédent avec celles d'un nouveau système de coordonnées :
      Matrice de transformation 3 par 3

Les transformations simples sont représentées sous une forme matricielle comme suit :


7.5 Les transformations imbriquées

Les transformations peuvent être imbriquées à n'importe quel niveau. L'imbrication des transformations a pour effet la post-multiplication (i.e., concaténation) des matrices de transformations subséquentes sur celles définies précédemment :
      Matrice de concaténation 3 par 3

Pour chaque élément, l'accumulation de toutes les transformations, définies sur un élément donné et sur tous ses ancêtres jusqu'à et y compris l'élément qui a établi la zone de visualisation courante (généralement l'élément, est appelée la matrice de transformation courante ou MTC. La MTC représente ainsi la correspondance entre les coordonnées utilisateur courantes et les coordonnées de la zone de visualisation :
Matrice de Transformation Courante

L'exemple Imbrication illustre des transformations imbriquées.

<?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="400px" height="150px"
     xmlns="http://www.w3.org/2000/svg">
  <desc>Exemple Imbrication - Transformations imbriquées</desc>
  <g fill="none" stroke="black" stroke-width="3" >
    <!-- Dessine les axes du système de coordonnées original -->
    <line x1="0" y1="1.5" x2="400" y2="1.5" />
    <line x1="1.5" y1="0" x2="1.5" y2="150" />
  </g>
  <!-- Un : une translation -->
  <g transform="translate(50,90)">
    <g fill="none" stroke="red" stroke-width="3" >
      <line x1="0" y1="0" x2="50" y2="0" />
      <line x1="0" y1="0" x2="0" y2="50" />
    </g>
    <text x="0" y="0" font-size="16" font-family="Verdana" >
      ....Translation(1)
    </text>
    <!-- Deux : une rotation -->
    <g transform="rotate(-45)">
      <g fill="none" stroke="green" stroke-width="3" >
        <line x1="0" y1="0" x2="50" y2="0" />
        <line x1="0" y1="0" x2="0" y2="50" />
      </g>
      <text x="0" y="0" font-size="16" font-family="Verdana" >
        ....Rotation(2)
      </text>
      <!-- Trois : une autre translation -->
      <g transform="translate(130,160)">
        <g fill="none" stroke="blue" stroke-width="3" >
          <line x1="0" y1="0" x2="50" y2="0" />
          <line x1="0" y1="0" x2="0" y2="50" />
        </g>
        <text x="0" y="0" font-size="16" font-family="Verdana" >
          ....Translation(3)
        </text>
      </g>
    </g>
  </g>
</svg>
Exemple Imbrication
Exemple Imbrication - Transformations imbriquées

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

Dans l'exemple ci-dessus, la MTC dans la troisième transformation imbriquée (i.e., transform = "translate(130,160)") consiste en la concaténation des trois transformations, comme suit :
Matrice de concaténation


7.6 L'attribut transform

La valeur de l'attribut transform est du type <liste-transformation>, qui est défini comme une liste de définitions de transformation, appliquées dans l'ordre. Les définitions de transformation individuelles sont séparées par des blancs et/ou des virgules. Les types disponibles pour les définitions de transformations comprennent :

Toutes les valeurs numériques sont du type <nombre> réels.

Si on fournit une liste de transformations, alors l'effet produit est comme si chaque transformation avait été spécifiée dans l'ordre indiqué. Par exemple :

<g transform="translate(-10,-20) scale(2) rotate(45) translate(5,10)">
  <!-- Les éléments graphiques viennent ici -->
</g>

cette définition est fonctionnellement équivalente à :

<g transform="translate(-10,-20)">
  <g transform="scale(2)">
    <g transform="rotate(45)">
      <g transform="translate(5,10)">
        <!-- Les éléments graphiques viennent ici -->
      </g>
    </g>
  </g>
</g>

L'attribut transform s'applique à un élément avant le traitement de toute autre valeur de coordonnée ou de longueur fournie à l'élément en question. Dans cet élément :

<rect x="10" y="10" width="20" height="20" transform="scale(2)"/>

les valeurs des attributs x, y, width et height sont traitées après que le système de coordonnées courant a été changé d'échelle d'un facteur 2 par l'attribut transform. Les attributs x, y, width et height (et tout autre attribut ou propriété) sont traités comme valeurs du nouveau système de coordonnées utilisateur, non du système de coordonnées précédent. Ainsi, l'élément 'rect' ci-dessus est fonctionnellement équivalent à :

<g transform="scale(2)">
  <rect x="10" y="10" width="20" height="20"/>
</g>

Ce qui suit est la Forme Backus-Naur (FBN) pour les valeurs de l'attribut transform. On emploie la notation suivante :

transform-list:
    wsp* transforms? wsp*

transforms:
    transform
    | transform comma-wsp+ transforms

transform:
    matrix
    | translate
    | scale
    | rotate
    | skewX
    | skewY

matrix:
    "matrix" wsp* "(" wsp*
       number comma-wsp
       number comma-wsp
       number comma-wsp
       number comma-wsp
       number comma-wsp
       number wsp* ")"

translate:
    "translate" wsp* "(" wsp* number ( comma-wsp number )? wsp* ")"

scale:
    "scale" wsp* "(" wsp* number ( comma-wsp number )? wsp* ")"

rotate:
    "rotate" wsp* "(" wsp* number ( comma-wsp number comma-wsp number )? wsp* ")"

skewX:
    "skewX" wsp* "(" wsp* number wsp* ")"

skewY:
    "skewY" wsp* "(" wsp* number wsp* ")"

number:
    sign? integer-constant
    | sign? floating-point-constant

comma-wsp:
    (wsp+ comma? wsp*) | (comma wsp*)

comma:
    ","

integer-constant:
    digit-sequence

floating-point-constant:
    fractional-constant exponent?
    | digit-sequence exponent

fractional-constant:
    digit-sequence? "." digit-sequence
    | digit-sequence "."

exponent:
    ( "e" | "E" ) sign? digit-sequence

sign:
    "+" | "-"

digit-sequence:
    digit
    | digit digit-sequence

digit:
    "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9"

wsp:
    (#x20 | #x9 | #xD | #xA)

Pour l'attribut transform :

    Animable : oui.

Voir l'élément 'animateTransform' pour des informations sur l'animation des transformations.

7.7 L'attribut viewBox

Il est souvent souhaitable de spécifier qu'un certain jeu de graphiques puisse s'étirer pour loger dans un élément conteneur donné. L'attribut viewBox offre cette possibilité.

Tous les éléments, qui établissent une nouvelle zone de visualisation (voir les éléments qui établissent une zone de visualisation), ainsi que les éléments 'marker', 'pattern' et 'view' ont un attribut viewBox. La valeur de l'attribut viewBox consiste en une liste de quatre nombres <min-x>, <min-y>, <largeur> et <hauteur>, séparés par des blancs et/ou des virgules, qui spécifie un rectangle, dans l'espace utilisateur, qui devrait correspondre aux limites de la zone de visualisation établie par l'élément en question, en prenant en compte l'attribut preserveAspectRatio. Si celui-ci est spécifié, une transformation supplémentaire est appliquée à tous les descendants de cet élément pour obtenir l'effet voulu.

Une valeur négative pour les attributs <largeur> ou <hauteur> provoque une erreur (voir le chapitre Le traitement des erreurs). Une valeur de zéro désactive le rendu de l'élément.

L'exemple ViewBox illustre l'emploi de l'attribut viewBox de l'élément 'svg' le plus externe pour spécifier que le contenu SVG devrait s'étirer pour correspondre aux limites de la zone de visualisation.

<?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="300px" height="200px" 
     viewBox="0 0 1500 1000" preserveAspectRatio="none"
     xmlns="http://www.w3.org/2000/svg">
  <desc>Exemple ViewBox - Utilisation de l'attribut viewBox 
   pour la crétion automatique d'un système de coordonnées
   utilisateur initial qui entraîne la mise à l'échelle du graphique
   dans la zone de visualisation, la taille de celle-ci n'important pas.</desc>

  <!-- Ce rectangle va de (0,0) à (1500,1000) dans l'espace utilisateur.
       Du fait de l'attribut viewBox ci-dessus, le rectangle finira par remplir
       en entier l'aire réservée pour le contenu SVG. -->
  <rect x="0" y="0" width="1500" height="1000" 
        fill="yellow" stroke="blue" stroke-width="12"  />

  <!-- Un grand triangle rouge -->
  <path fill="red"  d="M 750,100 L 250,900 L 1250,900 z"/>

  <!-- Une chaîne textuelle qui occupe la plupart de la zone
          de visualisation -->
  <text x="100" y="600" font-size="200" font-family="Verdana" >
    Étirer pour loger
  </text>
</svg>
Exemple ViewBox
Rendu dans la zone
de visualisation avec
width = "300px",
height = "200px"
      Rendu dans la zone
de visualisation avec
width = "150px",
height = "200px"
Exemple ViewBox - étiré pour tenir, 300 par 200       Exemple ViewBox - étiré pour tenir, 150 par 200

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

L'attribut viewBox cet effet que l'agent utilisateur fournit automatiquement la matrice de transformation appropriée pour faire correspondre le rectangle spécifié dans l'espace utilisateur avec les limites de la région désignée (c'est souvent la zone de visualisation). Pour obtenir le résultat de l'exemple de gauche, avec une zone de visualisation ayant une taille de 300x200 pixels, l'agent utilisateur doit automatiquement insérer une transformation qui réduise X et Y d'un facteur d'échelle de 0.2. L'effet équivaut à une zone de visualisation de taille 300x200 px et la transformation supplémentaire suivante dans le document, comme suit :

<?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="300px" height="200px"
     xmlns="http://www.w3.org/2000/svg">

  <g transform="scale(0.2)">

    <!-- Le reste du document vient ici -->

  </g>
</svg>
Pour obtenir le résultat de l'exemple de droite, avec une zone de visualisation ayant une taille de 150x200 pixels, l'agent utilisateur doit automatiquement insérer une transformation qui réduise X et Y d'un facteur d'échelle de 0.1 et 0.2 respectivement. L'effet équivaut à une zone de visualisation de taille 150x200 px et la transformation supplémentaire suivante dans le document, comme suit :
<?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="150px" height="200px"
     xmlns="http://www.w3.org/2000/svg">

  <g transform="scale(0.1 0.2)">

    <!-- Le reste du document vient ici -->

  </g>
</svg>

(Remarque : Dans certains cas, l'agent utilisateur devra produire une transformation translate en plus de la transformation scale. Par exemple, sur l'élément 'svg' le plus externe, une transformation translate sera nécessaire si l'attribut viewBox spécifie des valeurs autres que zéro pour <min-x> ou <min-y>.)

À la différence de l'attribut transform (voir les effets de l'attribut transform sur les attributs frères), la transformation automatique produite du fait de l'attribut viewBox n'influe pas sur les attributs x, y, width et height (ou, dans le cas de l'élément 'marker', sur les attributs markerWidth et markerHeight) de l'élément avec l'attribut viewBox. Ainsi, dans l'exemple ci-dessus montrant un élément 'svg' avec des attributs width, height et viewBox, ces attributs width et height représentent des valeurs dans le système de coordonnées existant avant que la transformation par viewBox ne soit appliquée. D'autre part, comme pour l'attribut transform, il établit un nouveau système de coordonnées pour tous les autres attributs et pour les éléments descendants.

Pour l'attribut viewBox :

    Animable : oui.

7.8 L'attribut preserveAspectRatio

Dans certains cas, typiquement quand on utilise l'attribut viewBox, on peut vouloir que les graphiques s'étirent pour se loger non uniformément dans la zone de visualisation en entier. Dans d'autres cas, on peut vouloir qu'une adaptation uniforme soit utilisée, dans le but de conserver le ratio d'aspect des graphiques.

L'attribut preserveAspectRatio = "<alignement> [<rencontre-ou-tranche>]", disponible pour tous les éléments qui établissent une nouvelle zone de visualisation (voir les éléments qui établissent une zone de visualisation) ainsi que pour les éléments 'image', 'marker', 'pattern' et 'view', indique s'il faut forcer, ou non, un changement d'échelle uniforme.

Pour les éléments qui établissent une nouvelle zone de visualisation (voir les éléments qui établissent une zone de visualisation) ainsi que pour les éléments 'marker', 'pattern' et 'view', l'attribut preserveAspectRatio ne s'applique que si une valeur est fournie pour l'attribut viewBox de l'élément en question. Pour tous ces éléments, si l'attribut viewBox est absent, alors l'attribut preserveAspectRatio est ignoré.

Pour l'élément 'image', l'attribut preserveAspectRatio indique comment l'image appelée devrait se loger par rapport au rectangle de référence et si le ration d'aspect de cette image appelée devrait être conservé en regard du système de coordonnées utilisateur courant.

Le paramètre <alignement> précise s'il faut forcer, ou non, un changement d'échelle uniforme et, si c'est le cas, la méthode d'alignement à employer quand le ratio d'aspect de l'attribut viewBox ne correspond pas avec celui de la zone de visualisation. Ce paramètre <alignement> doit être une des chaînes suivantes :

Le paramètre optionnel <rencontre-ou-tranche>, quand il est présent, est séparé de la valeur <alignement> par un ou plusieurs blancs et doit être l'une des chaînes suivantes :

L'exemple PreserveAspectRatio illustre les diverses options de l'attribut preserveAspectRatio. Pour économiser de l'espace, on a défini des entité XML pour les trois objets graphiques qui se répètent, le rectangle avec un smiley à l'intérieur et les contours des deux rectangles qui ont les mêmes dimensions que les zone de visualisation cibles. Cet exemple crée plusieurs nouvelles zones de visualisation en plaçant des sous-éléments 'svg' incorporés dans l'élément 'svg' le plus externe (voir le chapitre L'établissement d'une nouvelle zone de visualisation).

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" 
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"
[ <!ENTITY Sourire "
<rect x='.5' y='.5' width='29' height='39' fill='black' stroke='red'/>
<g transform='translate(0, 5)'>
<circle cx='15' cy='15' r='10' fill='yellow'/>
<circle cx='12' cy='12' r='1.5' fill='black'/>
<circle cx='17' cy='12' r='1.5' fill='black'/>
<path d='M 10 19 A 8 8 0 0 0 20 19' stroke='black' stroke-width='2'/>
</g>
">
<!ENTITY ZoneVisu1 "<rect x='.5' y='.5' width='49' height='29'
fill='none' stroke='blue'/>">
<!ENTITY ZoneVisu2 "<rect x='.5' y='.5' width='29' height='59'
fill='none' stroke='blue'/>">
]>

<svg width="450px" height="300px"
     xmlns="http://www.w3.org/2000/svg">
  <desc>Exemple PreserveAspectRatio - Illustration de l'attribut preserveAspectRatio</desc>
  <rect x="1" y="1" width="448" height="298"
        fill="none" stroke="blue"/>
  <g font-size="9">
    <text x="10" y="30">SVG à loger</text>
    <g transform="translate(20,40)">&Sourire;</g>
    <text x="10" y="110">ZoneVisu 1</text>
    <g transform="translate(10,120)">&ZoneVisu1;</g>
    <text x="10" y="180">ZoneVisu 2</text>
    <g transform="translate(20,190)">&ZoneVisu2;</g>

    <g id="meet-group-1" transform="translate(100, 60)">
      <text x="0" y="-30">------------ rencontre ------------</text>
      <g><text y="-10">xMin*</text>&ZoneVisu1;
        <svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 30 40"
             width="50" height="30">&Sourire;</svg></g>
      <g transform="translate(70,0)"><text y="-10">xMid*</text>&ZoneVisu1;
        <svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 30 40"
             width="50" height="30">&Sourire;</svg></g>
      <g transform="translate(0,70)"><text y="-10">xMax*</text>&ZoneVisu1;
        <svg preserveAspectRatio="xMaxYMax meet" viewBox="0 0 30 40"
             width="50" height="30">&Sourire;</svg></g>
    </g>

    <g id="meet-group-2" transform="translate(250, 60)">
      <text x="0" y="-30">------------ rencontre ------------</text>
      <g><text y="-10">*YMin</text>&ZoneVisu2;
        <svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 30 40"
             width="30" height="60">&Sourire;</svg></g>
      <g transform="translate(50, 0)"><text y="-10">*YMid</text>&ZoneVisu2;
        <svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 30 40"
             width="30" height="60">&Sourire;</svg></g>
      <g transform="translate(100, 0)"><text y="-10">*YMax</text>&ZoneVisu2;
        <svg preserveAspectRatio="xMaxYMax meet" viewBox="0 0 30 40"
             width="30" height="60">&Sourire;</svg></g>
    </g>

    <g id="slice-group-1" transform="translate(100, 220)">
      <text x="0" y="-30">------------- tranche -------------</text>
      <g><text y="-10">xMin*</text>&ZoneVisu2;
        <svg preserveAspectRatio="xMinYMin slice" viewBox="0 0 30 40"
             width="30" height="60">&Sourire;</svg></g>
      <g transform="translate(50,0)"><text y="-10">xMid*</text>&ZoneVisu2;
        <svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 30 40"
             width="30" height="60">&Sourire;</svg></g>
      <g transform="translate(100,0)"><text y="-10">xMax*</text>&ZoneVisu2;
        <svg preserveAspectRatio="xMaxYMax slice" viewBox="0 0 30 40"
             width="30" height="60">&Sourire;</svg></g>
    </g>

    <g id="slice-group-2" transform="translate(250, 220)">
      <text x="0" y="-30">------------- tranche -------------</text>
      <g><text y="-10">*YMin</text>&ZoneVisu1;
        <svg preserveAspectRatio="xMinYMin slice" viewBox="0 0 30 40"
             width="50" height="30">&Sourire;</svg></g>
      <g transform="translate(70,0)"><text y="-10">*YMid</text>&ZoneVisu1;
        <svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 30 40"
             width="50" height="30">&Sourire;</svg></g>
      <g transform="translate(140,0)"><text y="-10">*YMax</text>&ZoneVisu1;
        <svg preserveAspectRatio="xMaxYMax slice" viewBox="0 0 30 40"
             width="50" height="30">&Sourire;</svg></g>
    </g>   
  </g>
</svg>
Exemple PreserveAspectRatio
Exemple PreserveAspectRatio - illustration des options disponibles

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

Pour l'attribut preserveAspectRatio :

    Animable : oui.

7.9 L'établissement d'une nouvelle zone de visualisation

À chaque point d'un dessin SVG, on peut établir une nouvelle zone de visualisation, dans laquelle tous les graphiques qui y sont contenus sont dessinés, en incluant un élément 'svg' au contenu SVG. En établissant une nouvelle zone de visualisation, on établit aussi implicitement un nouveau système de coordonnées de zone de visualisation, un nouveau système de coordonnées utilisateur et, éventuellement, un nouveau tracé de rognage (voir la définition de la propriété 'overflow'). De plus, les unités en pourcentage revêtent une nouvelle signification quand elles sont définies par rapport à la zone de visualisation courante, du fait de l'établissement de la nouvelle zone de visualisation (voir le chapitre Les Unités).

Les limites de la nouvelle zone de visualisation sont définies par les attributs x, y, width et height de l'élément qui établit celle-ci, tel que l'élément 'svg'. Le nouveau système de coordonnées de la zone de visualisation et le nouveau système de coordonnées utilisateur ont tous deux pour origine le point (x, y), où x et y correspondent aux valeurs des attributs de même nom de l'élément établissant la zone de visualisation. L'orientation des nouveaux systèmes de coordonnées, celui de la zone de visualisation et celui utilisateur, correspond à l'orientation du système de coordonnées utilisateur courant pour l'élément qui établit la zone de visualisation. Une unité pour les nouveaux systèmes de coordonnées, celui de la zone de visualisation et celui utilisateur, a la même taille qu'une unité du système de coordonnées utilisateur courant pour l'élément établissant la zone de visualisation.

Voici un exemple :

<?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="4in" height="3in"
     xmlns="http://www.w3.org/2000/svg">
  <desc>Ce dessin SVG en incorpore un autre,
    établissant ainsi une nouvelle zone de visualisation
  </desc>
  <!-- La déclaration suivante établit une nouvelle zone
          de visualisation et rend le dessin SVG B dans celle-ci -->
  <svg x="25%" y="25%" width="50%" height="50%">
     <!-- Le dessin B vient ici -->
  </svg>
</svg>

Pour une démonstration complète sur la création de nouvelles zones de visualisation, voir l'exemple PreserveAspectRatio.

Les éléments suivants établissent une nouvelle zone de visualisation :

Qu'une nouvelle zone de visualisation établisse également, ou non, un nouveau tracé de rognage supplémentaire, ceci est déterminé par la valeur de la propriété 'overflow' de l'élément qui établit la nouvelle zone. Si un tracé de rognage est créé pour correspondre à la nouvelle zone de visualisation, la géométrie de ce tracé est déterminée par la valeur de la propriété 'clip'. Voir également le chapitre Le rognage par la zone de visualisation comparé au rognage par l'attribut viewBox.

7.10 Les unités

Toutes les coordonnées et les longueurs en SVG peuvent être spécifiées sans identifiant d'unité.

Quand une valeur de coordonnée ou de longueur est un nombre sans identifiant d'unité (par exemple, "25"), alors celle-ci est sensée être exprimée en unités utilisateur (i.e., une valeur dans le système de coordonnées utilisateur courant). Par exemple :

<text style="font-size: 50">La taille du texte est de 50 unités utilisateur</text>

Inversement, une coordonnée ou une longueur peuvent être exprimées comme un nombre suivi d'un identifiant d'unité (par exemple, "25cm" ou "15em"). La liste des identifiants d'unité de SVG correspond à celle des identifiants d'unité de CSS : em, ex, px, pt, pc, cm, mm, in et les pourcentages. Ce qui suit est la description de la façon dont les divers identifiants d'unités sont traités :

Remarquer que l'emploi d'unités px, ou tout autre identifiant d'unité absolue, peut conduire à des résultats visuels incohérents entre différents environnements visuels, étant donné que la taille de "1px" peut correspondre à un nombre d'unités utilisateur différent sur différents systèmes ; ainsi, on ne recommande les identifiants d'unité absolue que pour les attributs width et height de l'élément 'svg' le plus externe et pour les cas où le contenu ne recèle aucune transformation et où on souhaite spécifier des valeurs en fonction du maillage de pixels de l'appareil ou d'une unité physique réelle.

Pour les valeurs en pourcentage qui sont définies en fonction de la taille de la zone de visualisation :

L'exemple Unités ci-dessous illustre certaines des règles de traitement pour les différents types d'unité.

<?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="400px" height="200px" viewBox="0 0 4000 2000"
     xmlns="http://www.w3.org/2000/svg">
  <title>Exemple Unités</title>
  <desc>Illustration de diverses options d'unité</desc>

  <!-- Cadre pour l'image -->
  <rect x="5" y="5" width="3990" height="1990" 
        fill="none" stroke="blue" stroke-width="10"/>

  <g fill="blue" stroke="red" font-family="Verdana" font-size="150">
    <!-- Identifiants d'unité absolue -->
    <g transform="translate(400,0)">
      <text x="-50" y="300" fill="black" stroke="none">Unit. abs. :</text>
      <rect x="0" y="400" width="4in" height="2in" stroke-width=".4in"/>
      <rect x="0" y="750" width="384" height="192" stroke-width="38.4"/>
      <g transform="scale(2)">
        <rect x="0" y="600" width="4in" height="2in" stroke-width=".4in"/>
      </g>
    </g>

    <!-- Identifiants d'unité relative -->
    <g transform="translate(1600,0)">
      <text x="-50" y="300" fill="black" stroke="none">Unit. rel. :</text>
      <rect x="0" y="400" width="2.5em" height="1.25em" stroke-width=".25em"/>
      <rect x="0" y="750" width="375" height="187.5" stroke-width="37.5"/>
      <g transform="scale(2)">
        <rect x="0" y="600" width="2.5em" height="1.25em" stroke-width=".25em"/>
      </g>
    </g>

    <!-- Les pourcentages -->
    <g transform="translate(2800,0)">
      <text x="-50" y="300" fill="black" stroke="none">Pourcentages :</text>
      <rect x="0" y="400" width="10%" height="10%" stroke-width="1%"/>
      <rect x="0" y="750" width="400" height="200" stroke-width="31.62"/>
      <g transform="scale(2)">
        <rect x="0" y="600" width="10%" height="10%" stroke-width="1%"/>
      </g>
    </g>
  </g>
</svg>
Exemple Unités
Exemple Unités - illustration des options disponibles

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

Les trois rectangles de gauche montrent l'utilisation de l'un des identifiants d'unité absolue, l'unité « in » (pouce). L'image de référence ci-dessus a été générée sur un système en résolution 96dpi (i.e., 1 pouce = 96 pixels). Ainsi, le rectangle du haut, qui est spécifié en pouces, est exactement de la même taille que le rectangle du milieu, qui est spécifié en unités utilisateur, de telle façon que 96 unités utilisateur correspondent à un pouce du rectangle du haut. (Remarque : Sur des systèmes avec des résolutions d'écran différentes, les rectangles du haut et du milieu auront vraisemblablement des tailles différentes). Le rectangle du bas montre ce qui se produit quand on change l'échelle des valeurs exprimées en pouces.

Les trois rectangles du centre montrent l'utilisation de l'un des identifiants d'unité relative, l'unité « em ». Comme la propriété 'font-size' de l'élément 'g' le plus externe a une valeur de 150, chaque unité « em » est égale à 150 unités utilisateur. Le rectangle du haut, qui est spécifié en unités « em », est exactement de la même taille que celui du milieu, qui est spécifié en unités utilisateur, de telle façon que 150 unités utilisateur correspondent à une unité « em » du rectangle du haut. Le rectangle du bas montre ce qui se produit quand on change l'échelle des valeurs exprimées en « em ».

Les trois rectangles de droite montre l'utilisation de pourcentages. Remarquer que la largeur et la hauteur de la zone de visualisation, dans le système de coordonnées utilisateur pour l'élément de la zone de visualisation (dans ce cas, l'élément 'svg' le plus externe), sont respectivement de 4000 et de 2000, parce que le traitement de l'attribut viewBox aboutit à un système de coordonnées utilisateur transformé. Le rectangle du haut, qui est spécifié en pourcentage, est exactement de la même taille que celui du milieu, qui est spécifié en unités utilisateur équivalentes. En particulier, remarquer que la propriété 'stroke-width' sur le rectangle du milieu a une valeur égale à 1% de sqrt((largeur-effective)**2 + (hauteur-effective)**2)) / sqrt(2), soit, ici, .01*sqrt(4000*4000+2000*2000)/sqrt(2) ou 31.62. Le rectangle du bas montre ce qui se produit quand on change l'échelle des valeurs exprimées en pourcentage.


7.11 Les unités de la boîte englobante de l'object

Les éléments offrent la possibilité d'exprimer les valeurs de coordonnée et de longueur comme fractions (et, dans certains cas, pourcentages) de la boîte englobante (via le mot-clé objectBoundingBox) d'un élément donné :

Éléments Attributs Effets
'linearGradient' gradientUnits = "objectBoundingBox" Indique que les attributs, qui spécifient le vecteur de dégradé (x1, y1, x2, y2), représentent des fractions, ou pourcentages, de la boîte englobante de l'élément sur lequel le dégradé linéaire s'applique.
'radialGradient' gradientUnits = "objectBoundingBox" Indique que les attributs, qui spécifient le centre (cx, cy), le rayon (r) et le focus (fx, fy), représentent des fractions, ou pourcentages, de la boîte englobante de l'élément sur lequel le dégradé radial s'applique.
'pattern' patternUnits = "objectBoundingBox" Indique que les attributs, qui définissent la mosaïque du motif (x, y, width, height), s'établissent à partir de la boîte englobante de l'élément sur lequel le motif s'applique.
'pattern' patternContentUnits = "objectBoundingBox" Indique que le système de coordonnées utilisateur, pour le contenu du motif, s'établit à partir de la boîte englobante de l'élément sur lequel le motif s'applique.
'clipPath' clipPathUnits = "objectBoundingBox" Indique que le système de coordonnées utilisateur, pour le contenu de l'élément 'clipPath', s'établit à partir de la boîte englobante de l'élément sur lequel le tracé de rognage s'applique.
'mask' maskUnits = "objectBoundingBox" Indique que les attributs, qui définissent la région de masquage (x, y, width, height), s'établissent à partir de la boîte englobante de l'élément sur lequel le masque s'applique.
'mask' maskContentUnits = "objectBoundingBox" Indique que le système de coordonnées utilisateur, pour le contenu de l'élément 'mask', s'établit à partir de la boîte englobante de l'élément sur lequel le masque s'applique.
'filter' filterUnits = "objectBoundingBox" Indique que les attributs, qui définissent la région des effets de filtre (x, y, width, height), représentent des fractions, ou des pourcentages, de la boîte englobante de l'élément sur lequel le filtre s'applique.
'filter' primitiveUnits = "objectBoundingBox" Indique que les diverses valeurs de longueur, dans les primitives du filtre, représentent des fractions, ou des pourcentages, de la boîte englobante de l'élément sur lequel le filtre s'applique.

Dans la présentation qui suit, l'expression « élément concerné » désigne l'élément sur lequel un effet donné s'applique. Pour les dégradés et les motifs, l'élément concerné est l'élément graphique dont la propriété 'fill', ou 'stroke', appelle le dégradé ou le motif donné. (Voir le chapitre L'héritage des propriétés de peinture. Pour les règles particulières des éléments de texte, voir la discussion sur les unités de la boîte englobante et les éléments de texte). Pour les tracés de rognage, les masques et les filtres, l'élément concerné est soit un élément conteneur, soit un élément graphique.

Quand le mot-clé objectBoundingBox est employé, alors l'effet produit est comme si une matrice de transformation supplémentaire avait été insérée dans la liste des matrices de transformation pour créer un nouveau système de coordonnées utilisateur.

Premièrement, les coordonnées (minx,miny) et (maxx,maxy) sont déterminées pour l'élément concerné et tous ses descendants. Les valeurs minx, miny, maxx et maxy sont déterminées en calculant l'extension maximum de la forme de l'élément, sur X et sur Y, en fonction du système de coordonnées utilisateur de l'élément concerné. La boîte de délimitation représente le rectangle suffisant le plus resserré, aligné sur les axes du système de coordonnées utilisateur de l'élément concerné, qui englobe entièrement l'élément concerné et ses descendants. La boîte englobante est calculée en dehors de toutes les valeurs de rognage, de masquage, d'effets de filtre, d'opacité et d'épaisseur de trait. Pour les formes courbes, la boîte englobante englobe toutes les parties de la forme, et pas uniquement les points terminaux de celle-ci. Pour les éléments 'text', pour le calcul de la boîte englobante, on traite chaque glyphe comme un élément graphique distinct. Le calcul suppose que tous les glyphes occupent leur cellule de glyphe en entier. Par exemple, pour un texte horizontal, le calcul suppose que chaque glyphe s'étend verticalement jusqu'aux valeurs totales de hampe et de jambage de la police en question.

Ensuite, on fait correspondre le point de coordonnées (0,0), dans le nouveau système de coordonnées utilisateur, avec le coin (minx,miny) de la boîte englobante resserrée, dans le système de coordonnées utilisateur de l'élément concerné, et le point de coordonnées (1,1), dans le nouveau système de coordonnées utilisateur, avec le point (maxx,maxy) de la boîte englobante resserrée, de l'élément conerné. Dans la plupart des cas, la matrice de transformation suivante donne un effet satisfaisant :

[ (maxx-minx) 0 0 (maxy-miny) minx miny ]

 

Quand on emploie des valeurs en pourcentage avec les attributs qui définissent des vecteurs de dégradé, des mosaïques de motif, des régions de filtre ou des régions de masque, ces pourcentages représentent les mêmes valeurs que leurs équivalents décimaux (par exemple, 50% signifie la même chose que 0.5). Quand on emploie des valeurs en pourcentage dans le contenu d'un élément 'pattern', 'clipPath', 'mask' ou 'filter', ces valeurs sont considérés en fonction des règles de traitement pour les pourcentages, comme défini au chapitre Les unités.

On peut spécifier n'importe quelle valeur numérique pour les valeurs exprimées en fraction ou en pourcentage d'unités de boîte englobante d'un objet. En particulier, on peut spécifier des fractions inférieures à zéro et supérieures à 1 ainsi que des pourcentages inférieurs à 0% et supérieurs à 100%.

On ne devrait pas employer le mot-clé objectBoundingBox quand la géométrie de l'élément concerné ne comprend ni largeur ni hauteur, telle qu'une ligne horizontale ou verticale, même si la ligne apparaît avoir une épaisseur effective, sa largeur de liseré n'étant pas nulle, car l'épaisseur du liseré n'intervient pas dans le calcul des boîtes de délimitation. Si la géométrie de l'élément concerné ne comprend ni largeur ni hauteur et que la valeur objectBoundingBox est spécifiée, alors l'effet en question (par exemple, un dégradé ou un filtre) sera ignoré.


7.12 Les interfaces du DOM

Les interfaces suivantes sont définies ci-dessous : SVGPoint, SVGPointList, SVGMatrix, SVGTransform, SVGTransformList, SVGAnimatedTransformList, SVGPreserveAspectRatio, SVGAnimatedPreserveAspectRatio.


L'interface SVGPoint

Plusieurs interfaces du DOM de SVG se rapporte aux objets de la classe SVGPoint. Un objet SVGPoint représente une paire de coordonnées (x,y). Utilisé dans des opérations de matrice, un objet SVGPoint est traité comme un vecteur de la forme :

[x]
[y]
[1]

Définition IDL
interface SVGPoint { 

           attribute float x;
                       // déclenche une DOMException à l'initialisation
           attribute float y;
                       // déclenche une DOMException à l'initialisation

  SVGPoint matrixTransform ( in SVGMatrix matrix );
};

attributs
float x
La coordonnée x.
Exceptions à l'initialisation
DOMException
NO_MODIFICATION_ALLOWED_ERR : déclenchée lors d'une tentative de modification de la valeur d'un attribut en lecture seule.
float y
La coordonnée y.
Exceptions à l'initialisation
DOMException
NO_MODIFICATION_ALLOWED_ERR : déclenchée lors d'une tentative de modification de la valeur d'un attribut en lecture seule.
Méthodes
matrixTransform

Applique une matrice de transformation 2x3 à cet objet SVGPoint et retourne un nouvel objet SVGPoint transformé :

nouveau point = matrice * ce point
Paramètres
in SVGMatrix matrix La matrice à appliquer à cet objet SVGPoint.
Valeur retournée
SVGPoint Un nouvel objet SVGPoint.
Aucune exception

L'interface SVGPointList

Cette interface définit une liste d'objets SVGPoint.

L'interface SVGPointList possède les mêmes attributs et méthodes que les autres interfaces SVGxxxList. Les implémenteurs peuvent considérer l'utilisation d'une seule classe de base pour l'implémentation des diverses interfaces SVGxxxList.


Définition IDL
interface SVGPointList { 

  readonly attribute unsigned long numberOfItems;

  void   clear (  )
                  raises( DOMException );
  SVGPoint initialize ( in SVGPoint newItem )
                  raises( DOMException, SVGException );
  SVGPoint getItem ( in unsigned long index )
                  raises( DOMException );
  SVGPoint insertItemBefore ( in SVGPoint newItem, in unsigned long index )
                  raises( DOMException, SVGException );
  SVGPoint replaceItem ( in SVGPoint newItem, in unsigned long index )
                  raises( DOMException, SVGException );
  SVGPoint removeItem ( in unsigned long index )
                  raises( DOMException );
  SVGPoint appendItem ( in SVGPoint newItem )
                  raises( DOMException, SVGException );
};

attributs
readonly unsigned long numberOfItems
Le nombre d'items de la liste.
Méthodes
clear
Efface tous les items existants courants de la liste, ce qui produit une liste vide.
Aucun paramètre
Aucune valeur retournée
Exceptions
DOMException
NO_MODIFICATION_ALLOWED_ERR : déclenchée quand la liste ne peut être modifiée.
initialize
Efface tous les items existants courants de la liste et réinitialise celle-ci pour recevoir le seul item spécifié par le paramètre.
Paramètres
in SVGPoint newItem L'item qui doit devenir le seul membre de la liste.
Valeur retournée
SVGPoint L'item à insérer dans la liste.
Exceptions
DOMException
NO_MODIFICATION_ALLOWED_ERR : déclenchée quand la liste ne peut être modifiée.
SVGException
SVG_WRONG_TYPE_ERR : déclenchée si le paramètre newItem n'est pas du bon type pour la liste en question.
getItem
Retourne l'item spécifié de la liste.
Paramètres
in unsigned long index L'index de l'item de la liste qui doit être retourné. Le premier item a le numéro 0.
Valeur retournée
SVGPoint L'item sélectionné.
Exceptions
DOMException
INDEX_SIZE_ERR : déclenchée si le numéro d'index est négatif ou supérieur ou égal à la valeur de numberOfItems.
insertItemBefore
Insère un nouvel item dans la liste à la position indiquée. Le premier item a le numéro 0. Si newItem est déjà dans une liste, il en est retiré avant d'être inséré dans cette liste.
Paramètres
in SVGPoint newItem L'item qui doit être inséré dans la liste.
in unsigned long index L'index de l'item avant lequel le nouvel item doit être inséré. Le premier item a le numéro 0.
Si l'index égale 0, alors le nouvel item est inséré au début de la liste. Si l'index est supérieur ou égal à la valeur de numberOfItems, alors le nouvel item est rattaché à la fin de la liste.
Valeur retournée
SVGPoint L'item inséré.
Exceptions
DOMException
NO_MODIFICATION_ALLOWED_ERR : déclenchée quand la liste ne peut être modifiée.
SVGException
SVG_WRONG_TYPE_ERR : déclenchée si le paramètre newItem n'est pas du bon type pour la liste en question.
replaceItem
Remplace un item existant de la liste par un nouvel item. Si newItem est déjà dans une liste, il en est retiré avant d'être inséré dans cette liste.
Paramètres
in SVGPoint newItem L'item qui doit être inséré dans la liste.
in unsigned long index L'index de l'item qui doit être remplacé. Le premier item a le numéro 0.
Valeur retournée
SVGPoint L'item inséré.
Exceptions
DOMException
NO_MODIFICATION_ALLOWED_ERR : déclenchée quand la liste ne peut être modifiée.
INDEX_SIZE_ERR : déclenchée si le numéro d'index est négatif ou supérieur ou égal à la valeur de numberOfItems.
SVGException
SVG_WRONG_TYPE_ERR : déclenchée si le paramètre newItem n'est pas du bon type pour la liste en question.
removeItem
Retire un item existant de la liste.
Paramètres
in unsigned long index L'index de l'item qui doit être retiré. Le premier item a le numéro 0.
Valeur retournée
SVGPoint L'item retiré.
Exceptions
DOMException
NO_MODIFICATION_ALLOWED_ERR : déclenchée quand la liste ne peut être modifiée.
INDEX_SIZE_ERR : déclenchée si le numéro d'index est négatif ou supérieur ou égal à la valeur de numberOfItems.
appendItem
Insère un nouvel item à la fin de la liste. Si newItem est déjà dans une liste, il en est retiré avant d'être inséré dans la liste.
Paramètres
in SVGPoint newItem L'item qui doit être inséré dans la liste. Le premier item a le numéro 0.
Valeur retournée
SVGPoint L'item inséré.
Exceptions
DOMException
NO_MODIFICATION_ALLOWED_ERR : déclenchée quand la liste ne peut être modifiée.
SVGException
SVG_WRONG_TYPE_ERR : déclenchée si le paramètre newItem n'est pas du bon type pour la liste en question.

L'interface SVGMatrix

Plusieurs des opérations graphiques de SVG utilisent des matrices 2x3 de la forme :

[a c e]
[b d f]

celles-ci, quand elles sont développées dans une matrice 3x3 pour des raisons arithmétiques, deviennent :

[a c e]
[b d f]
[0 0 1]

Définition IDL
interface SVGMatrix { 

           attribute float a;
                       // déclenche une DOMException à l'initialisation
           attribute float b;
                       // déclenche une DOMException à l'initialisation
           attribute float c;
                       // déclenche une DOMException à l'initialisation
           attribute float d;
                       // déclenche une DOMException à l'initialisation
           attribute float e;
                       // déclenche une DOMException à l'initialisation
           attribute float f;
                       // déclenche une DOMException à l'initialisation

  SVGMatrix multiply ( in SVGMatrix secondMatrix );
  SVGMatrix inverse (  )
                  raises( SVGException );
  SVGMatrix translate ( in float x, in float y );
  SVGMatrix scale ( in float scaleFactor );
  SVGMatrix scaleNonUniform ( in float scaleFactorX, in float scaleFactorY );
  SVGMatrix rotate ( in float angle );
  SVGMatrix rotateFromVector ( in float x, in float y )
                  raises( SVGException );
  SVGMatrix flipX (  );
  SVGMatrix flipY (  );
  SVGMatrix skewX ( in float angle );
  SVGMatrix skewY ( in float angle );
};

attributs
float a
Le composant a de la matrice.
Exceptions à l'initialisation
DOMException
NO_MODIFICATION_ALLOWED_ERR : déclenchée lors d'une tentative de modification de la valeur d'un attribut en lecture seule.
float b
Le composant b de la matrice.
Exceptions à l'initialisation
DOMException
NO_MODIFICATION_ALLOWED_ERR : déclenchée lors d'une tentative de modification de la valeur d'un attribut en lecture seule.
float c
Le composant c de la matrice.
Exceptions à l'initialisation
DOMException
NO_MODIFICATION_ALLOWED_ERR : déclenchée lors d'une tentative de modification de la valeur d'un attribut en lecture seule.
float d
Le composant d de la matrice.
Exceptions à l'initialisation
DOMException
NO_MODIFICATION_ALLOWED_ERR : déclenchée lors d'une tentative de modification de la valeur d'un attribut en lecture seule.
float e
Le composant e de la matrice.
Exceptions à l'initialisation
DOMException
NO_MODIFICATION_ALLOWED_ERR : déclenchée lors d'une tentative de modification de la valeur d'un attribut en lecture seule.
float f
Le composant f de la matrice.
Exceptions à l'initialisation
DOMException
NO_MODIFICATION_ALLOWED_ERR : déclenchée lors d'une tentative de modification de la valeur d'un attribut en lecture seule.
Méthodes
multiply
Effectue une multiplication de matrice. Cette matrice est post-multipliée par une autre matrice pour donner une nouvelle matrice résultante.
Paramètres
in SVGMatrix secondMatrix La matrice post-multipliée par cette matrice.
Valeur retournée
SVGMatrix La matrive résultante.
Aucune exception
inverse
Retourne la matrice inverse.
Aucun paramètre
Valeur retournée
SVGMatrix La matrive inverse.
Exceptions
SVGException
SVG_MATRIX_NOT_INVERTABLE : déclenchée si cette matrice n'est pas inversable.
translate
Post-multiplie une transformation en translation sur la matrice courante et retourne la matrice résultante.
Paramètres
in float x La distance de translation le long de l'axe-x.
in float y La distance de translation le long de l'axe-y.
Valeur retournée
SVGMatrix La matrice résultante.
Aucune exception
scale
Post-multiplie une transformation en changement d'échelle uniforme sur la matrice courante et retourne la matrice résultante.
Paramètres
in float scaleFactor Un facteur d'échelle sur X et Y.
Valeur retournée
SVGMatrix La matrice résultante.
Aucune exception
scaleNonUniform
Post-multiplie une transformation en changement d'échelle non uniforme sur la matrice courante et retourne la matrice résultante.
Paramètres
in float scaleFactorX Le facteur d'échelle sur X.
in float scaleFactorY Le facteur d'échelle sur Y.
Valeur retournée
SVGMatrix La matrice résultante.
Aucune exception
rotate
Post-multiplie une transformation en rotation sur la matrice courante et retourne la matrice résultante.
Paramètres
in float angle L'angle de rotation.
Valeur retournée
SVGMatrix La matrice résultante.
Aucune exception
rotateFromVector
Post-multiplie une transformation en rotation sur la matrice courante et retourne la matrice résultante. L'angle de rotation est déterminé en prenant (+/-) atan(y/x). La direction du vecteur (x,y) détermine la valeur d'angle positive ou négative à utiliser.
Paramètres
in float x La coordonnée X du vecteur (x,y). Ne doit pas être nulle.
in float y La coordonnée Y du vecteur (x,y). Ne doit pas être nulle.
Valeur retournée
SVGMatrix La matrice résultante.
Exceptions
SVGException
SVG_INVALID_VALUE_ERR : déclenchée si l'un des paramètres a une valeur illégale.
flipX
Post-multiplie la transformation [-1 0 0 1 0 0] et retourne la matrice résultante.
Aucun paramètre
Valeur retournée
SVGMatrix La matrice résultante.
Aucune exception
flipY
Post-multiplie la transformation [1 0 0 -1 0 0] et retourne la matrice résultante.
Aucun paramètre
Valeur retournée
SVGMatrix La matrice résultante.
Aucune exception
skewX
Post-multiplie une transformation en inclinaison skewX sur la matrice courante et retourne la matrice résultante.
Paramètres
in float angle L'angle d'inclinaison.
Valeur retournée
SVGMatrix La matrice résultante.
Aucune exception
skewY
Post-multiplie une transformation en inclinaison skewY sur la matrice courante et retourne la matrice résultante.
Paramètres
in float angle L'angle d'inclinaison.
Valeur retournée
SVGMatrix La matrice résultante.
Aucune exception

L'interface SVGTransform

L'interface SVGTransform est celle d'une des transformations composantes dans un objet SVGTransformList ; ainsi, un objetSVGTransform correspond à un seul composant (par exemple, "scale(..)" ou "matrix(...)") dans la spécification d'un attribut transform.


Définition IDL
interface SVGTransform { 

  // Transform Types
  const unsigned short SVG_TRANSFORM_UNKNOWN   = 0;
  const unsigned short SVG_TRANSFORM_MATRIX    = 1;
  const unsigned short SVG_TRANSFORM_TRANSLATE = 2;
  const unsigned short SVG_TRANSFORM_SCALE     = 3;
  const unsigned short SVG_TRANSFORM_ROTATE    = 4;
  const unsigned short SVG_TRANSFORM_SKEWX     = 5;
  const unsigned short SVG_TRANSFORM_SKEWY     = 6;

  readonly attribute unsigned short type;
  readonly attribute SVGMatrix matrix;
  readonly attribute float angle;

  void setMatrix ( in SVGMatrix matrix );
  void setTranslate ( in float tx, in float ty );
  void setScale ( in float sx, in float sy );
  void setRotate ( in float angle, in float cx, in float cy );
  void setSkewX ( in float angle );
  void setSkewY ( in float angle );
};

Groupe de définitions des types de transformation
Constantes définies
SVG_TRANSFORM_UNKNOWN Ce type d'unité ne fait pas partie des types 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_TRANSFORM_MATRIX Une transformation "matrix(...)".
SVG_TRANSFORM_TRANSLATE Une transformation "translate(...)".
SVG_TRANSFORM_SCALE Une transformation "scale(...)".
SVG_TRANSFORM_ROTATE Une transformation "rotate(...)".
SVG_TRANSFORM_SKEWX Une transformation "skewX(...)".
SVG_TRANSFORM_SKEWY Une transformation "skewY(...)".
attributs
readonly unsigned short type
Le type de la valeur comme spécifiée par l'une des constantes ci-dessus.
readonly SVGMatrix matrix
La matrice qui représente cette transformation.
Pour SVG_TRANSFORM_MATRIX, la matrice contient les valeurs a, b, c, d, e, f, fournies par l'utilisateur.
Pour SVG_TRANSFORM_TRANSLATE, les valeurs e et f représentent les quantités de translation (a=1,b=0,c=0,d=1).
Pour SVG_TRANSFORM_SCALE, les valeurs a et d représentent les quantités de variation d'échelle (b=0,c=0,e=0,f=0).
Pour SVG_TRANSFORM_ROTATE, SVG_TRANSFORM_SKEWX et SVG_TRANSFORM_SKEWY, les valeurs a, b, c et d représentent la matrice qui va résulter de la transformation donnée (e=0,f=0).
readonly float angle
Un attribut commode pour SVG_TRANSFORM_ROTATE, SVG_TRANSFORM_SKEWX et SVG_TRANSFORM_SKEWY. Il contient l'angle spécifié.
Pour SVG_TRANSFORM_MATRIX, SVG_TRANSFORM_TRANSLATE et SVG_TRANSFORM_SCALE, l'angle sera nul.
Méthodes
setMatrix
Établit le type de l'attribut transform à SVG_TRANSFORM_MATRIX, les paramètres de la matrice définissant la nouvelle transformation.
Paramètres
in SVGMatrix matrix La nouvelle matrice de la transformation.
Aucune valeur retournée
Aucune exception
setTranslate
Établit le type de l'attribut transform à SVG_TRANSFORM_TRANSLATE, les paramètres tx et ty définissant les quantités de translation.
Paramètres
in float tx La quantité de translation sur X.
in float ty La quantité de translation sur Y.
Aucune valeur retournée
Aucune exception
setScale
Établit le type de l'attribut transform à SVG_TRANSFORM_SCALE, les paramètres sx et sy définissant les quantités de variation d'échelle.
Paramètres
in float sx Le facteur d'échelle sur X.
in float sy Le facteur d'échelle sur Y.
Aucune valeur retournée
Aucune exception
setRotate
Établit le type de l'attribut transform à SVG_TRANSFORM_ROTATE, le paramètre angle définissant l'angle de rotation et les paramètres cx et cy le centre de rotation optionnel.
Paramètres
in float angle L'angle de rotation.
in float cx La coordonnée x du centre de rotation.
in float cy La coordonnée y du centre de rotation.
Aucune valeur retournée
Aucune exception
setSkewX
Établit le type de l'attribut transform à SVG_TRANSFORM_SKEWX, le paramètre angle définissant la quantité d'inclinaison.
Paramètres
in float angle L'angle d'inclinaison.
Aucune valeur retournée
Aucune exception
setSkewY
Établit le type de l'attribut transform à SVG_TRANSFORM_SKEWY, le paramètre angle définissant la quantité d'inclinaison.
Paramètres
in float angle L'angle d'inclinaison.
Aucune valeur retournée
Aucune exception

L'interface SVGTransformList

Cette interface définit une liste d'objets SVGTransform.

Les interfaces SVGTransformList et SVGTransform correspondent aux divers attributs qui spécifient un jeu de transformations, tel que l'attribut transform disponible pour de nombreux éléments SVG.

L'interface SVGTransformList possède les mêmes attributs et méthodes que les autres interfaces SVGxxxList. Les implémenteurs peuvent considérer l'utilisation d'une seule classe de base pour l'implémentation des diverses interfaces SVGxxxList.


Définition IDL
interface SVGTransformList { 

  readonly attribute unsigned long numberOfItems;

  void   clear (  )
                  raises( DOMException );
  SVGTransform initialize ( in SVGTransform newItem )
                  raises( DOMException, SVGException );
  SVGTransform getItem ( in unsigned long index )
                  raises( DOMException );
  SVGTransform insertItemBefore ( in SVGTransform newItem, in unsigned long index )
                  raises( DOMException, SVGException );
  SVGTransform replaceItem ( in SVGTransform newItem, in unsigned long index )
                  raises( DOMException, SVGException );
  SVGTransform removeItem ( in unsigned long index )
                  raises( DOMException );
  SVGTransform appendItem ( in SVGTransform newItem )
                  raises( DOMException, SVGException );
  SVGTransform createSVGTransformFromMatrix ( in SVGMatrix matrix );
  SVGTransform consolidate (  );
};

attributs
readonly unsigned long numberOfItems
Le nombre des items de la liste.
Méthodes
clear
Efface tous les items existants courants de la liste, ce qui produit une liste vide.
Aucun paramètre
Aucune valeur retournée
Exceptions
DOMException
NO_MODIFICATION_ALLOWED_ERR : déclenchée quand la liste ne peut être modifiée.
initialize
Efface tous les items existants courants de la liste et réinitialise celle-ci pour recevoir le seul item spécifié en paramètre.
Paramètres
in SVGTransform newItem L'item qui doit devenir le seul membre de la liste.
Valeur retournée
SVGTransform L'item qui doit être inséré dans la liste.
Exceptions
DOMException
NO_MODIFICATION_ALLOWED_ERR : déclenchée quand la liste ne peut être modifiée.
SVGException
SVG_WRONG_TYPE_ERR : déclenchée si le paramètre newItem n'est pas du bon type pour la liste en question.
getItem
Retourne l'item spécifié de la liste.
Paramètres
in unsigned long index L'index de l'item qui doit être retourné de la liste. Le premier item a le numéro 0.
Valeur retournée
SVGTransform L'item sélectionné
Exceptions
DOMException
INDEX_SIZE_ERR : déclenchée si le numéro d'index est négatif ou supérieur ou égal à la valeur de numberOfItems.
insertItemBefore
Insère un nouvel item dans la liste à la position spécifiée. Le premier item a le numéro 0. Si newItem est déjà dans une liste, il en est retiré avant d'être inséré dans cette liste.
Paramètres
in SVGTransform newItem L'item qui doit être inséré dans la liste.
in unsigned long index L'index de l'item avant lequel le nouvel item sera inséré. Le premier item a le numéro 0.
Si l'index égale 0, alors le nouvel item est inséré au début de la liste. Si l'index est supérieur ou égal à la valeur de numberOfItems, alors le nouvel item est rattaché à la fin de la liste.
Valeur retournée
SVGTransform L'item inséré.
Exceptions
DOMException
NO_MODIFICATION_ALLOWED_ERR : déclenchée quand la liste ne peut être modifiée.
SVGException
SVG_WRONG_TYPE_ERR : déclenchée si le paramètre newItem n'est pas du bon type pour la liste en question.
replaceItem
Remplace un item existant dans la liste avec un nouvel item. Si newItem est déjà dans une liste, il en est retiré avant d'être inséré dans cette liste.
Paramètres
in SVGTransform newItem L'item qui doit être inséré dans la liste.
in unsigned long index L'index de l'item qui doit être remplacé. Le premier item a le numéro 0.
Valeur retournée
SVGTransform L'item inséré.
Exceptions
DOMException
NO_MODIFICATION_ALLOWED_ERR : déclenchée quand la liste ne peut être modifiée.
INDEX_SIZE_ERR : déclenchée si le numéro d'index est négatif ou supérieur ou égal à la valeur de numberOfItems.
SVGException
SVG_WRONG_TYPE_ERR : déclenchée si le paramètre newItem n'est pas du bon type pour la liste en question.
removeItem
Retire un item existant de la liste.
Paramètres
in unsigned long index L'index de l'item qui doit être retiré. Le premier item a le numéro 0.
Valeur retournée
SVGTransform L'item retiré.
Exceptions
DOMException
NO_MODIFICATION_ALLOWED_ERR : déclenchée quand la liste ne peut être modifiée.
INDEX_SIZE_ERR : déclenchée si le numéro d'index est négatif ou supérieur ou égal à la valeur de numberOfItems.
appendItem
Insère un nouvel item à la fin de la liste. Si newItem est déjà dans une liste, il en est retiré avant d'être inséré dans cette liste.
Paramètres
in SVGTransform newItem L'item qui doit être inséré dans la liste. Le premier item a le numéro 0.
Valeur retournée
SVGTransform L'item inséré.
Exceptions
DOMException
NO_MODIFICATION_ALLOWED_ERR : déclenchée quand la liste ne peut être modifiée.
SVGException
SVG_WRONG_TYPE_ERR : déclenchée si le paramètre newItem n'est pas du bon type pour la liste en question.
createSVGTransformFromMatrix
Crée un objet SVGTransform dont le type de l'attribut transform est initialisé à SVG_TRANSFORM_MATRIX et dont les valeurs sont celles de la matrice donnée.
Paramètres
in SVGMatrix matrix La matrice qui définit la transformation.
Valeur retournée
SVGTransform L'objet SVGTransform retourné.
Aucune exception
consolidate
Consolide la liste des objets SVGTransform séparés, en multipliant les matrices de transformation équivalentes ensemble pour aboutir à une liste consistant en un seul objet SVGTransform de type SVG_TRANSFORM_MATRIX.
Aucun paramètre
Valeur retournée
SVGTransform L'objet SVGTransform résultant qui devient le seul item de la liste. Si la liste était vide, alors une valeur "null" est retournée.
Aucune exception

L'interface SVGAnimatedTransformList

Utilisée pour les divers attributs qui spécifient un jeu de transformations, tel que l'attribut transform disponible pour de nombreux éléments SVG et animable.

Définition IDL
interface SVGAnimatedTransformList { 

  readonly attribute SVGTransformList baseVal;
  readonly attribute SVGTransformList animVal;
};

attributs
readonly SVGTransformList baseVal
La valeur de base de l'attribut donné avant l'application de toute animation.
readonly SVGTransformList animVal
Si l'attribut donné, ou la propriété, est en cours d'animation, contient la valeur animée courante de l'attribut, ou de la propriété, l'objet lui-même et son contenu étant tous deux en lecture seule. Si l'attribut donné, ou la propriété n'est pas en cours d'animation, contient la même valeur que 'baseVal'.

L'interface SVGPreserveAspectRatio

L'interface SVGPreserveAspectRatio correspond à l'attribut preserveAspectRatio, disponible pour certains éléments SVG.


Définition IDL
interface SVGPreserveAspectRatio { 

  // Types alignement
  const unsigned short SVG_PRESERVEASPECTRATIO_UNKNOWN   = 0;
  const unsigned short SVG_PRESERVEASPECTRATIO_NONE     = 1;
  const unsigned short SVG_PRESERVEASPECTRATIO_XMINYMIN = 2;
  const unsigned short SVG_PRESERVEASPECTRATIO_XMIDYMIN = 3;
  const unsigned short SVG_PRESERVEASPECTRATIO_XMAXYMIN = 4;
  const unsigned short SVG_PRESERVEASPECTRATIO_XMINYMID = 5;
  const unsigned short SVG_PRESERVEASPECTRATIO_XMIDYMID = 6;
  const unsigned short SVG_PRESERVEASPECTRATIO_XMAXYMID = 7;
  const unsigned short SVG_PRESERVEASPECTRATIO_XMINYMAX = 8;
  const unsigned short SVG_PRESERVEASPECTRATIO_XMIDYMAX = 9;
  const unsigned short SVG_PRESERVEASPECTRATIO_XMAXYMAX = 10;
  // Types rencontre-ou-tranche
  const unsigned short SVG_MEETORSLICE_UNKNOWN   = 0;
  const unsigned short SVG_MEETORSLICE_MEET  = 1;
  const unsigned short SVG_MEETORSLICE_SLICE = 2;

           attribute unsigned short align;
                       // déclenche une DOMException à l'initialisation
           attribute unsigned short meetOrSlice;
                       // déclenche une DOMException à l'initialisation
};

Groupe de définition du type alignement
Constantes définies
SVG_PRESERVEASPECTRATIO_UNKNOWN L'énumération a été établie à une valeur qui ne fait pas partie des types 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_PRESERVEASPECTRATIO_NONE Correspond à la valeur "none" de l'attribut preserveAspectRatio.
SVG_PRESERVEASPECTRATIO_XMINYMIN Correspond à la valeur "xMinYMin" de l'attribut preserveAspectRatio.
SVG_PRESERVEASPECTRATIO_XMIDYMIN Correspond à la valeur "xMidYMin" de l'attribut preserveAspectRatio.
SVG_PRESERVEASPECTRATIO_XMAXYMIN Correspond à la valeur "xMaxYMin" de l'attribut preserveAspectRatio.
SVG_PRESERVEASPECTRATIO_XMINYMID Correspond à la valeur "xMinYMid" de l'attribut preserveAspectRatio.
SVG_PRESERVEASPECTRATIO_XMIDYMID Correspond à la valeur "xMidYMid" de l'attribut preserveAspectRatio.
SVG_PRESERVEASPECTRATIO_XMAXYMID Correspond à la valeur "xMaxYMid" de l'attribut preserveAspectRatio.
SVG_PRESERVEASPECTRATIO_XMINYMAX Correspond à la valeur "xMinYMax" de l'attribut preserveAspectRatio.
SVG_PRESERVEASPECTRATIO_XMIDYMAX Correspond à la valeur "xMidYMax" de l'attribut preserveAspectRatio.
SVG_PRESERVEASPECTRATIO_XMAXYMAX Correspond à la valeur "xMaxYMax" de l'attribut preserveAspectRatio.
Groupe de définition du type rencontre-ou-tranche
Constantes définies
SVG_MEETORSLICE_UNKNOWN L'énumération a été établie à une valeur qui ne fait pas partie des types 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_MEETORSLICE_MEET Correspond à la valeur "meet" de l'attribut preserveAspectRatio.
SVG_MEETORSLICE_SLICE Correspond à la valeur "slice" de l'attribut preserveAspectRatio.
attributs
unsigned short align
Le type de la valeur d'alignement comme spécifiée par l'une des constantes ci-dessus.
Exceptions à l'initialisation
DOMException
NO_MODIFICATION_ALLOWED_ERR : déclenchée lors d'une tentative de modification de la valeur d'un attribut en lecture seule.
unsigned short meetOrSlice
Le type de la valeur rencontre-ou-tranche comme spécifiée par l'une des constantes ci-dessus.
Exceptions à l'initialisation
DOMException
NO_MODIFICATION_ALLOWED_ERR : déclenchée lors d'une tentative de modification de la valeur d'un attribut en lecture seule.

L'interface SVGAnimatedPreserveAspectRatio

Utilisée pour les attributs du type SVGPreserveAspectRatio qui peuvent être animés.

Définition IDL
interface SVGAnimatedPreserveAspectRatio { 

  readonly attribute SVGPreserveAspectRatio baseVal;
  readonly attribute SVGPreserveAspectRatio animVal;
};

attributs
readonly SVGPreserveAspectRatio baseVal
La valeur de base de l'attribut donné avant l'application de toute animation.
readonly SVGPreserveAspectRatio animVal
Si l'attribut donné, ou la propriété, est en cours d'animation, contient la valeur animée courante de l'attribut, ou de la propriété, et l'objet lui-même et son contenu sont en lecture seule. Si l'attribut donné, ou la propriété, ne sont pas en cours d'animation, contient la même valeur que 'baseVal'.