9 Les formes de base

Contenu

• 9.1 Introduction
• 9.2 L'élément 'rect'
• 9.3 L'élément 'circle'
• 9.4 L'élément 'ellipse'
• 9.5 L'élément 'line'
• 9.6 L'élément 'polyline'
• 9.7 L'élément 'polygon'
• 9.8 La grammaire pour les spécifications des points des éléments 'polyline' et 'polygon'
• 9.9 Les interfaces du DOM

9.1 Introduction

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

• des rectangles (dont ceux avec des coins arrondis optionnels) ;
• des cercles ;
• des ellipses ;
• des lignes ;
• des polylignes ;
• des polygones.

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 >

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

• effectue une opération moveto absolue vers l'emplacement (x+rx,y), où x représente la valeur de l'attribut x de l'élément 'rect', convertie dans l'espace utilisateur, rx la valeur effective de l'attribut rx, convertie dans l'espace utilisateur et y la valeur de l'attribut y convertie dans l'espace utilisateur ;
• effectue une opération lineto horizontale absolue vers l'emplacement (x+width-rx,y), où width représente la valeur de l'attribut width de l'élément 'rect', convertie dans l'espace utilisateur ;
• effectue une opération arc elliptique absolue vers le point de coordonnées (x+width,y+ry), où les valeurs effectives des attributs rx et ry de l'élément 'rect', converties dans l'espace utilisateur, sont utilisées respectivement comme attributs rx et ry pour la commande arc elliptique, la valeur du paramètre rotation-axe-x est mise à zéro, celle du paramètre drapeau-arc-large à zéro et celle du paramètre drapeau-balayage à un ;
• effectue une opération lineto verticale absolue vers le point (x+width,y+height-ry), où height représente la valeur de l'attribut height de l'élément 'rect', convertie dans l'espace utilisateur ;
• effectue une opération arc elliptique absolue vers le point (x+width-rx,y+height) ;
• effectue une opération lineto horizontale absolue vers le point (x+rx,y+height) ;
• effectue une opération arc elliptique absolue vers le point (x,y+height-ry) ;
• effectue une opération lineto verticale absolue vers le point (x,y+ry) ;
• effectue une opération arc elliptique absolue vers le point (x+rx,y).

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

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

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 >

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

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 >

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

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 >

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

• effectue une opération moveto absolue vers la location absolue (x1,y1), où x1 et y1 représentent respectivement les valeurs des attributs x1 et y1 de l'élément 'line', converties dans l'espace utilisateur ;
• effectue une opération lineto absolue vers la location absolue (x2,y2), où x2 et y2 représentent respectivement les valeurs des attributs x2 et y2 de l'élément 'line', converties dans l'espace utilisateur.

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

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 >

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 :

• effectue une opération moveto absolue vers la première paire de coordonnées de la liste de points ;
• pour chacune des paires de coordonnées subséquentes, effectue une opération lineto absolue vers le point désigné par la paire en question.

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

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 >

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 :

• effectue une opération moveto absolue vers la première paire de coordonnées de la liste de points ;
• pour chacune des paires de coordonnées subséquentes, effectue une opération lineto absolue vers le point désigné par la paire en question ;
• effectue une commande closepath.

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

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 :

• * : 0 ou plus
• + : 1 ou plus
• ? : 0 ou 1
• (): regroupement
• | : alternatives séparées
• guillemets doubles autour des littéraux

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