4 septembre 2001

9 Les formes de base


Contenu


 

9.1 Introduction

SVG contient le jeu des éléments de forme de base suivant :

Mathématiquement, ces éléments de forme sont équivalents à un élément 'path' qui construirait la même forme. Les formes de base peuvent avoir un liseré, avoir un remplissage et être utilisées comme tracé de rognage. Toutes les propriétés disponibles pour l'élément 'path' s'appliquent aussi aux formes de base.

9.2 L'élément 'rect'

L'élément 'rect' définit un rectangle qui s'aligne selon l'axe du système de coordonnées utilisateur. On peut obtenir des rectangles avec des coins arrondis en donnant les valeurs appropriées aux attributs rx et ry.

<!ENTITY % rectExt "" >
<!ELEMENT rect (%descTitleMetadata;,(animate|set|animateMotion|animateColor|animateTransform
                %geExt;%rectExt;)*) >
<!ATTLIST rect
  %stdAttrs;
  %testAttrs;
  %langSpaceAttrs;
  externalResourcesRequired %Boolean; #IMPLIED
  class %ClassList; #IMPLIED
  style %StyleSheet; #IMPLIED
  %PresentationAttributes-Color;
  %PresentationAttributes-FillStroke;
  %PresentationAttributes-Graphics;
  transform %TransformList; #IMPLIED
  %graphicsElementEvents;
  x %Coordinate; #IMPLIED
  y %Coordinate; #IMPLIED
  width %Length; #REQUIRED
  height %Length; #REQUIRED
  rx %Length; #IMPLIED
  ry %Length; #IMPLIED >

Définitions des attributs :

x = "<coordonnée>"
La coordonnée sur l'axe-x du côté du rectangle qui a une valeur de coordonnée sur l'axe-x plus petite dans le système de coordonnées utilisateur courant.
Si l'attribut n'est pas spécifié, l'effet est le même que si une valeur de "0" l'avait été.
Animable : oui.
y = "<coordonnée>"
La coordonnée sur l'axe-y du côté du rectangle qui a une valeur de coordonnée sur l'axe-y plus petite dans le système de coordonnées utilisateur courant.
Si l'attribut n'est pas spécifié, l'effet est le même que si une valeur de "0" l'avait été.
Animable : oui.
width = "<longueur>"
La largeur du rectangle.
Une valeur négative provoque une erreur (voir Le traitement des erreurs). Une valeur nulle désactive le rendu de l'élément.
Animable : oui.
height = "<longueur>"
La hauteur du rectangle.
Une valeur négative provoque une erreur (voir Le traitement des erreurs). Une valeur nulle désactive le rendu de l'élément.
Animable : oui.
rx = "<longueur>"
Pour les rectangles arrondis, le rayon sur l'axe-x de l'ellipse utilisée pour l'arrondi des coins d'un rectangle.
Une valeur négative provoque une erreur (voir Le traitement des erreurs).
Voir les notes ci-dessous sur ce qui se produit quand l'attribut n'est pas spécifié.
Animable : oui.
ry = "<longueur>"
Pour les rectangles arrondis, le rayon sur l'axe-y de l'ellipse utilisée pour l'arrondi des coins d'un rectangle.
Une valeur négative provoque une erreur (voir Le traitement des erreurs).
Voir les notes ci-dessous sur ce qui se produit quand l'attribut n'est pas spécifié.
Animable : oui.
Attributs définis ailleurs :
%stdAttrs;, %langSpaceAttrs;, class, transform, %graphicsElementEvents;, %testAttrs;, externalResourcesRequired, style, %PresentationAttributes-Color;, %PresentationAttributes-FillStroke;, %PresentationAttributes-Graphics;.

Si une valeur spécifiée correcte est donnée à l'attribut rx, mais pas à l'attribut ry, alors l'agent utilisateur traite l'élément 'rect' comme ayant une valeur pour son attribut ry égale à rx. Inversement, si une valeur spécifiée correcte est donnée à l'attribut ry, mais pas à l'attribut rx, alors l'agent utilisateur traite l'élément 'rect' comme ayant une valeur pour son attribut rx égale à ry. Si ni rx ni ry n'ont une valeur spécifiée correcte, alors l'agent utilisateur traite l'élément 'rect' comme si aucun arrondi n'avait été spécifié, aboutissant ainsi à des coins droits. Si la valeur de l'attribut rx est supérieure à la moitié de la largeur du rectangle, alors l'agent utilisateur traite l'élément 'rect' comme si la valeur effective de rx était la moitié de la largeur du rectangle. Si la valeur de l'attribut ry est supérieure à la moitié de la hauteur du rectangle, alors l'agent utilisateur traite l'élément 'rect' comme si la valeur effective de ry était la moitié de la hauteur du rectangle.

Mathématiquement, un élément 'rect' peut se ramener à un élément 'path' équivalent, comme suit : (Remarque : toutes les valeurs de coordonnée et de longueur du premier sont d'abord converties en coordonnées de l'espace utilisateur selon ce qui est dit à la section Les unités).

L'exemple rect01 montre un rectangle avec des coins droits. L'élément 'rect' est rempli en jaune et a un liseré de couleur "navy".

<?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="12cm" height="4cm" viewBox="0 0 1200 400"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <desc>Exemple rect01 - rectangle avec des coins droits</desc>

  <!-- Montre le contour du canevas en utilisant l'élément 'rect' -->
  <rect x="1" y="1" width="1198" height="398"
        fill="none" stroke="blue" stroke-width="2"/>

  <rect x="400" y="100" width="400" height="200"
        fill="yellow" stroke="navy" stroke-width="10"  />
</svg>
Exemple rect01
Exemple rect01 - rectangle avec des coins droits

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

L'exemple rect02 montre deux rectangles arrondis. L'attribut rx spécifie l'arrondi des coins des rectangles. Remarquer que, comme aucune valeur n'est spécifiée pour l'attribut ry, celui-ci prendra la même valeur que l'attribut rx.

<?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="12cm" height="4cm" viewBox="0 0 1200 400"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <desc>Exemple rect02 - rectangles arrondis</desc>

  <!-- Montre le contour du canevas en utilisant un élément 'rect' -->
  <rect x="1" y="1" width="1198" height="398"
        fill="none" stroke="blue" stroke-width="2"/>

  <rect x="100" y="100" width="400" height="200" rx="50"
        fill="green" />

  <g transform="translate(700 210) rotate(-30)">
    <rect x="0" y="0" width="400" height="200" rx="50"
          fill="none" stroke="purple" stroke-width="30" />
  </g>
</svg>
Exemple rect02
Exemple rect02 - rectangles avec coins arrondis, exprimé en coordonnées utilisateur

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

9.3 L'élément 'circle'

L'élément 'circle' définit un cercle à partir d'un point central et d'un rayon.

<!ENTITY % circleExt "" >
<!ELEMENT circle (%descTitleMetadata;,(animate|set|animateMotion|animateColor|animateTransform
                %geExt;%circleExt;)*) >
<!ATTLIST circle
  %stdAttrs;
  %testAttrs;
  %langSpaceAttrs;
  externalResourcesRequired %Boolean; #IMPLIED
  class %ClassList; #IMPLIED
  style %StyleSheet; #IMPLIED
  %PresentationAttributes-Color;
  %PresentationAttributes-FillStroke;
  %PresentationAttributes-Graphics;
  transform %TransformList; #IMPLIED
  %graphicsElementEvents;
  cx %Coordinate; #IMPLIED
  cy %Coordinate; #IMPLIED
  r %Length; #REQUIRED >

Définitions des attributs :

cx = "<coordonnée>"
La coordonnée sur l'axe-x du centre du cercle.
Si l'attribut n'est pas spécifié, l'effet est le même que si une valeur de "0" l'avait été.
Animable : oui.
cy = "<coordonnée>"
La coordonnée sur l'axe-y du centre du cercle.
Si l'attribut n'est pas spécifié, l'effet est le même que si une valeur de "0" l'avait été..
Animable : oui.
r = "<longueur>"
Le rayon du cercle.
Une valeur négative provoque une erreur (voir Le traitement des erreurs). Une valeur de zéro désactive le rendu de l'élément.
Animable : oui.

Attributs définis ailleurs :
%stdAttrs;, %langSpaceAttrs;, class, transform, %graphicsElementEvents;, %testAttrs;, externalResourcesRequired, style, %PresentationAttributes-Color;, %PresentationAttributes-FillStroke;, %PresentationAttributes-Graphics;.

L'exemple circle01 consiste en un élément 'circle' qui est rempli en rouge avec un liseré bleu.

<?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="12cm" height="4cm" viewBox="0 0 1200 400"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <desc>Exemple circle01 - cercle rempli de rouge avec un liseré bleu</desc>

  <!-- Montre le contour du canevas avec un élément 'rect' -->
  <rect x="1" y="1" width="1198" height="398"
        fill="none" stroke="blue" stroke-width="2"/>

  <circle cx="600" cy="200" r="100"
        fill="red" stroke="blue" stroke-width="10"  />
</svg>
Exemple circle01
Exemple circle01 - cercle rempli de rouge avec liseré bleu

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

9.4 L'élément 'ellipse'

L'élément 'ellipse' définit une ellipse, alignée sur les axes du système de coordonnées utilisateur et basée sur un point central et deux rayons.

<!ENTITY % ellipseExt "" >
<!ELEMENT ellipse (%descTitleMetadata;,(animate|set|animateMotion|animateColor|animateTransform
                %geExt;%ellipseExt;)*) >
<!ATTLIST ellipse
  %stdAttrs;
  %testAttrs;
  %langSpaceAttrs;
  externalResourcesRequired %Boolean; #IMPLIED
  class %ClassList; #IMPLIED
  style %StyleSheet; #IMPLIED
  %PresentationAttributes-Color;
  %PresentationAttributes-FillStroke;
  %PresentationAttributes-Graphics;
  transform %TransformList; #IMPLIED
  %graphicsElementEvents;
  cx %Coordinate; #IMPLIED
  cy %Coordinate; #IMPLIED
  rx %Length; #REQUIRED
  ry %Length; #REQUIRED >

Définitions des attributs :

cx = "<coordonnée>"
La coordonnée sur l'axe-x du centre de l'ellipse.
Si l'attribut n'est pas spécifié, l'effet est le même que si une valeur de "0" l'avait été.
Animable : oui.
cy = "<coordonnée>"
La coordonnée sur l'axe-y du centre de l'ellipse.
Si l'attribut n'est pas spécifié, l'effet est le même que si une valeur de "0" l'avait été.
Animable : oui.
rx = "<longueur>"
Le rayon sur l'axe-x de l'ellipse.
Une valeur négative provoque une erreur (voir Le traitement des erreurs). Une valeur de zéro désactive le rendu de l'élément.
Animable : oui.
ry = "<longueur>"
Le rayon sur l'axe-y de l'ellipse.
Une valeur négative provoque une erreur (voir Le traitement des erreurs). Une valeur de zéro désactive le rendu de l'élément.
Animable : oui.

Attributs définis ailleurs :
%stdAttrs;, %langSpaceAttrs;, class, transform, %graphicsElementEvents;, %testAttrs;, externalResourcesRequired, style, %PresentationAttributes-Color;, %PresentationAttributes-FillStroke;, %PresentationAttributes-Graphics;.

L'exemple ellipse01 ci-dessous spécifie les coordonnées de deux ellipses dans le système de coordonnées utilisateur établi par l'attribut viewBox de l'élément 'svg' et par l'attribut transform des éléments 'g' et 'ellipse'. Les deux ellipses utilisent les valeurs par défaut de zéro des attributs cx et cy (le centre de l'ellipse). La seconde ellipse est tournée.

<?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="12cm" height="4cm" viewBox="0 0 1200 400"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <desc>Exemple ellipse01 - exemples d'ellipses</desc>

  <!-- Montre le contour du canevas avec un élément 'rect' -->
  <rect x="1" y="1" width="1198" height="398"
        fill="none" stroke="blue" stroke-width="2" />

  <g transform="translate(300 200)">
    <ellipse rx="250" ry="100"
          fill="red"  />
  </g>

  <ellipse transform="translate(900 200) rotate(-30)" 
        rx="250" ry="100"
        fill="none" stroke="blue" stroke-width="20"  />

</svg>
Exemple ellipse01
Exemple ellipse01 - ellipses exprimées en coordonnées utilisateur

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

9.5 L'élément 'line'

L'élément 'line' définit un segment de droite qui commence à un point et finit à un autre.

<!ENTITY % lineExt "" >
<!ELEMENT line (%descTitleMetadata;,(animate|set|animateMotion|animateColor|animateTransform
                %geExt;%lineExt;)*) >
<!ATTLIST line
  %stdAttrs;
  %testAttrs;
  %langSpaceAttrs;
  externalResourcesRequired %Boolean; #IMPLIED
  class %ClassList; #IMPLIED
  style %StyleSheet; #IMPLIED
  %PresentationAttributes-Color;
  %PresentationAttributes-FillStroke;
  %PresentationAttributes-Graphics;
  %PresentationAttributes-Markers;
  transform %TransformList; #IMPLIED
  %graphicsElementEvents;
  x1 %Coordinate; #IMPLIED
  y1 %Coordinate; #IMPLIED
  x2 %Coordinate; #IMPLIED
  y2 %Coordinate; #IMPLIED >

Définitions des attributs :

x1 = "<coordonnée>"
La coordonnée sur l'axe-x du départ du segment de droite.
Si l'attribut n'est pas spécifié, l'effet est le même que si une valeur de "0" l'avait été.
Animable : oui.
y1 = "<coordonnée>"
La coordonnée sur l'axe-y du départ du segment de droite.
Si l'attribut n'est pas spécifié, l'effet est le même que si une valeur de "0" l'avait été.
Animable : oui.
x2 = "<coordonnée>"
La coordonnée sur l'axe-x de la fin du segment de droite.
Si l'attribut n'est pas spécifié, l'effet est le même que si une valeur de "0" l'avait été.
Animable : oui.
y2 = "<coordonnée>"
La coordonnée; sur l'axe-y de la fin du segment de droite.
Si l'attribut n'est pas spécifié, l'effet est le même que si une valeur de "0" l'avait été.
Animable : oui.

Attributs définis ailleurs :
%stdAttrs;, %langSpaceAttrs;, class, transform, %graphicsElementEvents;, %testAttrs;, externalResourcesRequired, style, %PresentationAttributes-Color;, %PresentationAttributes-FillStroke;, %PresentationAttributes-Graphics;.

Mathématiquement, un élément 'line' peut se ramener à un élément 'path' équivalent, comme suit : (Remarque : toutes les valeurs de coordonnée et de longueur sont d'abord convertie en coordonnées dans l'espace utilisateur selon ce qui est dit à la section Les unités.)

Comme les éléments 'line' sont de simples segments de droite, donc dans un espace unidimensionnel, ils n'ont pas d'intérieur ; ainsi, les éléments 'line' n'ont jamais de remplissage (voir la propriété 'fill').

L'exempleline01 ci-dessous spécifie les coordonnées de cinq segments de droite dans le système de coordonnées utilisateur établi par l'attribut viewBox de l'élément 'svg'. Les segments de droite ont différentes épaisseurs.

<?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="12cm" height="4cm" viewBox="0 0 1200 400"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <desc>Exemple line01 - droites exprimées en coordonnées utilisateur</desc>

  <!-- Montre le contour du canevas avec un élément 'rect' -->
  <rect x="1" y="1" width="1198" height="398"
        fill="none" stroke="blue" stroke-width="2" />

  <g stroke="green" >
    <line x1="100" y1="300" x2="300" y2="100"
            stroke-width="5"  />
    <line x1="300" y1="300" x2="500" y2="100"
            stroke-width="10"  />
    <line x1="500" y1="300" x2="700" y2="100"
            stroke-width="15"  />
    <line x1="700" y1="300" x2="900" y2="100"
            stroke-width="20"  />
    <line x1="900" y1="300" x2="1100" y2="100"
            stroke-width="25"  />
  </g>
</svg>
Exemple line01
Exemple line01 - droites exprimées en coordonnées utilisateur

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

9.6 L'élément 'polyline'

L'élément 'polyline' définit un jeu de segments de droite reliés entre eux. Typiquement, les éléments 'polyline' définissent des formes ouvertes.

<!ENTITY % polylineExt "" >
<!ELEMENT polyline (%descTitleMetadata;,(animate|set|animateMotion|animateColor|animateTransform
                %geExt;%polylineExt;)*) >
<!ATTLIST polyline
  %stdAttrs;
  %testAttrs;
  %langSpaceAttrs;
  externalResourcesRequired %Boolean; #IMPLIED
  class %ClassList; #IMPLIED
  style %StyleSheet; #IMPLIED
  %PresentationAttributes-Color;
  %PresentationAttributes-FillStroke;
  %PresentationAttributes-Graphics;
  %PresentationAttributes-Markers;
  transform %TransformList; #IMPLIED
  %graphicsElementEvents;
  points %Points; #REQUIRED >

Définitions des attributs :

points = "<liste-de-points>"
Les points qui construisent l'élément polyline. Toutes les valeurs de coordonnée sont dans le système de coordonnées utilisateur.
Animable : oui.

Attributs définis ailleurs :
%stdAttrs;, %langSpaceAttrs;, class, transform, %graphicsElementEvents;, %testAttrs;, externalResourcesRequired, style, %PresentationAttributes-Color;, %PresentationAttributes-FillStroke;, %PresentationAttributes-Graphics;.

Si on fournit un nombre impair de coordonnées, alors l'élément est en erreur, le comportement de l'agent utilisateur étant le même que pour celui qui survient quand un élément 'path' incorrectement spécifié.

Mathématiquement, un élément 'polyline' peut se ramener à un élément 'path' équivalent, comme suit :

L'exemple polyline01 ci-dessous spécifie un élément polyline dans le système de coordonnées utilisateur établi par l'attribut viewBox de l'élément 'svg'.

<?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="12cm" height="4cm" viewBox="0 0 1200 400"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <desc>Exemple polyline01 - des barres de plus en plus grandes</desc>

  <!-- Montre le contour du canevas avec un élément 'rect' -->
  <rect x="1" y="1" width="1198" height="398"
        fill="none" stroke="blue" stroke-width="2" />

  <polyline fill="none" stroke="blue" stroke-width="10" 
            points="50,375
                    150,375 150,325 250,325 250,375
                    350,375 350,250 450,250 450,375
                    550,375 550,175 650,175 650,375
                    750,375 750,100 850,100 850,375
                    950,375 950,25 1050,25 1050,375
                    1150,375" />
</svg>
Exemple polyline01
Exemple polyline01 - des barres de plus en plus grandes

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

9.7 L'élément 'polygon'

L'élément 'polygon' définit une forme fermée consistant en un jeu de segments de droite reliés.

<!ENTITY % polygonExt "" >
<!ELEMENT polygon (%descTitleMetadata;,(animate|set|animateMotion|animateColor|animateTransform
                %geExt;%polygonExt;)*) >
<!ATTLIST polygon
  %stdAttrs;
  %testAttrs;
  %langSpaceAttrs;
  externalResourcesRequired %Boolean; #IMPLIED
  class %ClassList; #IMPLIED
  style %StyleSheet; #IMPLIED
  %PresentationAttributes-Color;
  %PresentationAttributes-FillStroke;
  %PresentationAttributes-Graphics;
  %PresentationAttributes-Markers;
  transform %TransformList; #IMPLIED
  %graphicsElementEvents;
  points %Points; #REQUIRED >

Définitions des attributs :

points = "<liste-de-points>"
Les points qui déterminent le polygone. Toutes les valeurs de coordonnées sont dans le système de coordonnées utilisateur.
Animable : oui.

Attributs définis ailleurs :
%stdAttrs;, %langSpaceAttrs;, class, transform, %graphicsElementEvents;, %testAttrs;, externalResourcesRequired, style, %PresentationAttributes-Color;, %PresentationAttributes-FillStroke;, %PresentationAttributes-Graphics;.

Si on fournit un nombre impair de coordonnées, alors l'élément est en erreur, le comportement de l'agent utilisateur étant le même que pour celui qui survient avec un élément 'path' incorrectement spécifié.

Mathématiquement, un élément 'polygon' peut se ramener à un élément 'path' équivalent, comme suit :

L'exemple polygon01 ci-dessous spécifie deux polygones (une étoile et un hexagone) dans le système de coordonnées utilisateur établi par l'attribut viewBox de l'élément 'svg'.

<?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="12cm" height="4cm" viewBox="0 0 1200 400"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <desc>Exemple polygon01 - étoile et hexagone</desc>

  <!-- Montre le contour du canevas avec un element 'rect' -->
  <rect x="1" y="1" width="1198" height="398"
        fill="none" stroke="blue" stroke-width="2" />

  <polygon fill="red" stroke="blue" stroke-width="10" 
            points="350,75  379,161 469,161 397,215
                    423,301 350,250 277,301 303,215
                    231,161 321,161" />
  <polygon fill="lime" stroke="blue" stroke-width="10" 
            points="850,75  958,137.5 958,262.5
                    850,325 742,262.6 742,137.5" />
</svg>
Exemple polygon01
Exemple polygon01 - étoile et hexagone

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

9.8 La grammaire pour les spécifications des points des éléments 'polyline' et 'polygon'

Ce qui suit est la Forme Backus-Naur (FBN) pour les spécifications des points dans des éléments 'polyline' et 'polygon'. On emploie la notation suivante :

list-of-points:
    wsp* coordinate-pairs? wsp*

coordinate-pairs:
    coordinate-pair
    | coordinate-pair comma-wsp coordinate-pairs

coordinate-pair:
    coordinate comma-wsp coordinate

coordinate:
    number

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)+

9.9 Les interfaces du DOM


Les interfaces suivantes sont définies ci-dessous : SVGRectElement, SVGCircleElement, SVGEllipseElement, SVGLineElement, SVGAnimatedPoints, SVGPolylineElement, SVGPolygonElement.


L'interface SVGRectElement

L'interface SVGRectElement correspond à l'élément 'rect'.


Définition IDL
interface SVGRectElement : 
                SVGElement,
                SVGTests,
                SVGLangSpace,
                SVGExternalResourcesRequired,
                SVGStylable,
                SVGTransformable,
                events::EventTarget { 

  readonly attribute SVGAnimatedLength x;
  readonly attribute SVGAnimatedLength y;
  readonly attribute SVGAnimatedLength width;
  readonly attribute SVGAnimatedLength height;
  readonly attribute SVGAnimatedLength rx;
  readonly attribute SVGAnimatedLength ry;
};

attributs
readonly SVGAnimatedLength x
Correspond à l'attribut x de l'élément 'rect' en question.
readonly SVGAnimatedLength y
Correspond à l'attribut y de l'élément 'rect' en question.
readonly SVGAnimatedLength width
Correspond à l'attribut width de l'élément 'rect' en question.
readonly SVGAnimatedLength height
Correspond à l'attribut height de l'élément 'rect' en question.
readonly SVGAnimatedLength rx
Correspond à l'attribut rx de l'élément 'rect' en question.
readonly SVGAnimatedLength ry
Correspond à l'attribut ry de l'élément 'rect' en question.

L'interface SVGCircleElement

L'interface SVGCircleElement correspond à l'élément 'circle'.


Définition IDL
interface SVGCircleElement : 
                SVGElement,
                SVGTests,
                SVGLangSpace,
                SVGExternalResourcesRequired,
                SVGStylable,
                SVGTransformable,
                events::EventTarget { 

  readonly attribute SVGAnimatedLength cx;
  readonly attribute SVGAnimatedLength cy;
  readonly attribute SVGAnimatedLength r;
};

attributs
readonly SVGAnimatedLength cx
Correspond à l'attribut cx de l'élément 'circle' en question.
readonly SVGAnimatedLength cy
Correspond à l'attribut cy de l'élément 'circle' en question.
readonly SVGAnimatedLength r
Correspond à l'attribut r de l'élément 'circle' en question.

L'interface SVGEllipseElement

L'interface SVGEllipseElement correspond à l'élément 'ellipse'.


Définition IDL
interface SVGEllipseElement : 
                SVGElement,
                SVGTests,
                SVGLangSpace,
                SVGExternalResourcesRequired,
                SVGStylable,
                SVGTransformable,
                events::EventTarget { 

  readonly attribute SVGAnimatedLength cx;
  readonly attribute SVGAnimatedLength cy;
  readonly attribute SVGAnimatedLength rx;
  readonly attribute SVGAnimatedLength ry;
};

attributs
readonly SVGAnimatedLength cx
Correspond à l'attribut cx de l'élément 'ellipse' en question.
readonly SVGAnimatedLength cy
Correspond à l'attribut cy de l'élément 'ellipse' en question.
readonly SVGAnimatedLength rx
Correspond à l'attribut rx de l'élément 'ellipse' en question.
readonly SVGAnimatedLength ry
Correspond à l'attribut ry de l'élément 'ellipse' en question.

L'interface SVGLineElement

L'interface SVGLineElement correspond à l'élément 'line'.


Définition IDL
interface SVGLineElement : 
                SVGElement,
                SVGTests,
                SVGLangSpace,
                SVGExternalResourcesRequired,
                SVGStylable,
                SVGTransformable,
                events::EventTarget { 

  readonly attribute SVGAnimatedLength x1;
  readonly attribute SVGAnimatedLength y1;
  readonly attribute SVGAnimatedLength x2;
  readonly attribute SVGAnimatedLength y2;
};

attributs
readonly SVGAnimatedLength x1
Correspond à l'attribut x1 de l'élément 'line' en question.
readonly SVGAnimatedLength y1
Correspond à l'attribut y1 de l'élément 'line' en question.
readonly SVGAnimatedLength x2
Correspond à l'attribut x2 de l'élément 'line' en question.
readonly SVGAnimatedLength y2
Correspond à l'attribut y2 de l'élément 'line' en question.

L'interface SVGAnimatedPoints

L'interface SVGAnimatedPoints gère les éléments ayant un attribut 'points' qui contient une liste de valeurs de coordonnée et gère la capacité d'animation de cet attribut.

De plus, l'attribut 'points' sur l'élément original, quand on l'accède via le DOM de XML (par exemple, en utilisant l'appel de méthode getAttribute()), va refléter immédiatement tous les changements survenus sur l'attribut points.


Définition IDL
interface SVGAnimatedPoints { 

  readonly attribute SVGPointList   points;
  readonly attribute SVGPointList   animatedPoints;
};

attributs
readonly SVGPointList points

Offre un accès au contenu de base (i.e., statique) de l'attribut points.

readonly SVGPointList animatedPoints

Offre un accès au contenu de l'attribut points en cours d'animation. 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é. Si l'attribut donné, ou la propriété, n'est pas en cours d'animation, contient la même valeur que 'points'.


L'interface SVGPolylineElement

L'interface SVGPolylineElement correspond à l'élément 'polyline'.


Définition IDL
interface SVGPolylineElement : 
                SVGElement,
                SVGTests,
                SVGLangSpace,
                SVGExternalResourcesRequired,
                SVGStylable,
                SVGTransformable,
                events::EventTarget,
                SVGAnimatedPoints {};


L'interface SVGPolygonElement

L'interface SVGPolygonElement correspond à l'élément 'polygon'.


Définition IDL
interface SVGPolygonElement : 
                SVGElement,
                SVGTests,
                SVGLangSpace,
                SVGExternalResourcesRequired,
                SVGStylable,
                SVGTransformable,
                events::EventTarget,
                SVGAnimatedPoints {};