Un tracé représente le contour d'une forme, qui peut avoir un remplissage, avoir un trait, être utilisé comme tracé de rognage ou toute combinaison des trois. (Voir les chapitres La peinture : le remplissage, le liseré et les symboles marqueurs et Le rognage, le masquage et la composition).
Un tracé se décrit en faisant appel au concept d'un point courant. Par analogie avec un dessin sur du papier, le point courant peut être assimilé à la position du crayon. Celle-ci peut changer et le contour d'une forme (ouverte ou fermée) peut être tracé en faisant glisser le crayon selon une ligne droite ou courbe.
Les tracés représentent la géométrie du contour d'un objet, définis selon les instructions des éléments moveto (établit un nouveau point courant), lineto (dessine une droite), curveto (dessine une courbe à l'aide d'une courbe de Bézier cubique), arc (un arc circulaire ou elliptique) et closepath (clot la forme courante en dessinant une ligne jusqu'au dernier moveto). Il est possible d'avoir des tracés composés (i.e., un tracé avec plusieurs sous-tracés) qui permettent des effets comme un « trou de donut » dans des objets.
Ce chapitre décrit la syntaxe, le comportement et les interfaces du DOM pour les tracés SVG. On peut trouver diverses notes d'implémentation pour les tracés SVG aux sections Remarques sur l'implémentation de l'élément 'path' et Remarques sur l'implémentation d'un arc elliptique.
On définit un tracé SVG avec l'élément 'path'.
<!ENTITY % pathExt "" > <!ELEMENT path (%descTitleMetadata;,(animate|set|animateMotion|animateColor|animateTransform %geExt;%pathExt;)*) > <!ATTLIST path %stdAttrs; %testAttrs; %langSpaceAttrs; externalResourcesRequired %Boolean; #IMPLIED class %ClassList; #IMPLIED style %StyleSheet; #IMPLIED %PresentationAttributes-Color; %PresentationAttributes-FillStroke; %PresentationAttributes-Graphics; %PresentationAttributes-Markers; transform %TransformList; #IMPLIED %graphicsElementEvents; d %PathData; #REQUIRED pathLength %Number; #IMPLIED > |
Définitions de l'attribut :
On définit un tracé avec un élément 'path' ayant un attribut d = "<données-de-tracé>", où d contient les commandes moveto, line, curve (avec des courbes de Bézier cubique ou quadratique), arc et closepath.
L'exemple triangle01 spécifie le tracé d'une forme triangulaire. (Le M indique une commande moveto, les Ls des commandes lineto et le z une commande closepath).
<?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="4cm" height="4cm" viewBox="0 0 400 400"
xmlns="http://www.w3.org/2000/svg">
<title>Exemple triangle01- exemple simple d'un 'path'</title>
<desc>Un tracé dessinant un triangle</desc>
<rect x="1" y="1" width="398" height="398"
fill="none" stroke="blue" />
<path d="M 100 100 L 300 100 L 200 300 z"
fill="red" stroke="blue" stroke-width="3" />
</svg>
|
Voir cet exemple en SVG (seulement avec navigateur gérant SVG)
Les données de tracé peuvent contenir des caractères nouvelle ligne et, ainsi, être décomposées en plusieurs lignes pour améliorer la lisibilité. Du fait des limitations pour la longueur des lignes avec certains outils concernés, on recommande que les générateurs SVG partagent les grandes chaînes de données de tracé sur plusieurs lignes, chaque ligne n'excédant pas 255 caractères. Remarquer aussi que les caractères nouvelle ligne ne sont admises que dans certains endroits des données de tracé.
La syntaxe des données de tracé est concise pour permettre une taille minimale de fichier et des chargements efficaces, les données de tracé de nombreux fichiers SVG constituant l'essentiel de leur contenu. Voici certaines des voies suivies par SVG pour la réduction de la taille des données de tracé :
La syntaxe des données de tracé est une notation avec préfixe (i.e., les commandes sont suivies par des paramètres). Le seul point décimal admis est le caractère Unicode [UNICODE] FULL STOP « . » (également appelé dans Unicode PERIOD, point et point décimal), aucun autre caractère de délimitation n'est admis. (Par exemple, ce qui suit est une valeur numérique invalide dans un flux de données de tracé : "13,000.56" ; employer à la place : "13000.56").
Pour les versions relatives des commandes, toutes les valeurs de coordonnées sont relatives au point courant au début de la commande.
On utilise la notation suivante dans les tables ci-dessous :
Les sections suivantes dressent la liste des commandes.
Les commandes "moveto" (M ou m) établissent un nouveau point courant. L'effet produit est comme si on soulevait le « crayon » et le déplaçait vers un nouvel emplacement. Un segment de données de tracé doit commencer par une commande "moveto". Les commandes "moveto" subséquentes (i.e., quand la commande "moveto" n'est pas la première) représentent le commencement d'un nouveau sous-tracé :
| Commande | Nom | Paramètres | Description |
|---|---|---|---|
| M (absolue) m (relative) |
moveto | (x y)+ | Commence un nouveau sous-tracé au point de coordonnées (x,y) donné. Un M (majuscule) annonce que des coordonnées absolues vont suivre, un m (minuscule) des coordonnées relatives. Si une commande "moveto" relative (m) apparaît comme premier élément du tracé, alors elle est considérée comme représentant une paire de coordonnées absolues. Si une commande "moveto" est suivie par plusieurs paires de coordonnées, les paires subséquentes sont traitées comme des commandes "lineto" implicites. |
La commande "closepath" (Z ou z) termine le sous-tracé courant et entraîne le dessin automatique d'une ligne droite, du point courant jusqu'au point initial du sous-tracé courant. Si une commande "closepath" est immédiatement suivie par une commande "moveto", alors "moveto" identifie le point de départ du prochain sous-tracé. Si une commande "closepath" est immédiatement suivie par toute autre commande, alors le prochain sous-tracé commence au même point initial que celui du sous-tracé courant.
Quans un sous-tracé s'achève par une commande "closepath," son comportement diffère d'un sous-tracé qui est clos « manuellement », via une commande "lineto", selon les valeurs des propriétés 'stroke-linejoin' et 'stroke-linecap'. Avec une commande "closepath", la fin du dernier sous-tracé est « jointe » avec le début du segment initial du sous-tracé, en utilisant la valeur courante de la propriété 'stroke-linejoin'. Par contre, si on ferme « manuellement » le sous-tracé via une commande "lineto", le début du premier segment et la fin du dernier segment ne sont pas joints, mais chacun se superposant, en utilisant la valeur courante de la propriété'stroke-linecap'. Une fois la commande exécutée, le nouveau point courant s'établit au point initial du sous-tracé courant.
| Commande | Nom | Paramètres | Description |
|---|---|---|---|
| Z ou z |
closepath | (aucun) | Achève le sous-tracé courant par le dessin d'une ligne droite, du point courant jusqu'au point initial du sous-tracé courant. |
Les diverses commandes "lineto" dessinent une ligne droite du point courant vers un nouveau point :
| Commande | Nom | Paramètres | Description |
|---|---|---|---|
| L (absolue) l (relative) |
lineto | (x y)+ | Dessine une ligne du point courant jusqu'au point de coordonnées (x,y) donné, qui devient le nouveau point courant. Un L (majuscule) annonce que des coordonnées absolues vont suivre, un l (minuscule) des coordonnées relatives. On peut spécifier un certain nombre de paires de coordonnées pour le dessin d'un polygone. Une fois la commande exécutée, le nouveau point courant s'établit au dernier jeu de coordonnées fourni. |
| H (absolue) h (relative) |
lineto horizontal | x+ | Dessine une ligne horizontale du point courant (cpx, cpy) jusqu'au point (x, cpy). Un H (majuscule) annonce que des coordonnées absolues vont suivre, un h (minuscule) des coordonnées relatives. On peut fournir plusieurs valeurs x (bien que cela n'ait généralement aucun sens). Une fois la commande exécutée, le nouveau point courant devient (x, cpy) pour la valeur finale de x. |
| V (absolue) v (relative) |
lineto vertical | y+ | Dessine une ligne verticale du point courant (cpx, cpy) jusqu'au point (cpx, y). Un V (majuscule) annonce que des coordonnées absolues vont suivre, un v (minuscule) des coordonnées relatives. On peut fournir plusieurs valeurs y (bien que cela n'ait généralement aucun sens). Une fois la commande exécutée, le nouveau point courant devient (cpx, y) pour la valeur finale de y. |
Ces trois groupes de commandes dessinent des courbes :
Les commandes de courbe de Bézier cubique sont les suivantes :
| Commande | Nom | Paramètres | Description |
|---|---|---|---|
| C (absolue) c (relative) |
curveto | (x1 y1 x2 y2 x y)+ | Dessine une courbe de Bézier cubique du point courant jusqu'au point (x,y) en utilisant (x1,y1) comme point de contrôle en début de courbe et (x2,y2) en fin de courbe. Un C (majuscule) annonce que des coordonnées absolues vont suivre, un c (minuscule) des coordonnées relatives. On peut spécifier plusieurs jeux de coordonnées pour le dessin d'un polybézier. Une fois la commande exécutée, le nouveau point courant devient la dernière paire de coordonnées utilisée dans le polybézier. |
| S (absolue) s (relative) |
curveto raccourci/lissé | (x2 y2 x y)+ | Dessine une courbe de Bézier cubique du point courant jusqu'au point (x,y). Le premier point de contrôle est sensé être le reflet du second point de contrôle de la commande précédente par rapport au point courant. (S'il n'y a pas de commande précédente ou si celle-ci n'était pas une commande C, c, S ou s, le premier point de contrôle est supposé coïncider avec le point courant). Le point ((x2,y2) est le second point de contrôle (i.e., le point de contrôle en fin de courbe). Un S (majuscule) annonce que des coordonnées absolues vont suivre, un s (minuscule) des coordonnées relatives. On peut spécifier plusieurs jeux de coordonnées pour le dessin d'un polybézier. Une fois la commande exécutée, le nouveau point courant devient la paire de coordonnées (x,y) utilisée dans le polybézier. |
L'exemple troisièmeDegré01 montre quelques utilisation simples des commandes de courbe de Bézier cubique dans un tracé. L'exemple fait appel à une feuille de style interne pour l'assignation des propriétés de style. Remarquer que le point de contrôle pour la commande "S" est calculé automatiquement comme le reflet du point de contrôle pour la commande "C" précédente par rapport au point de départ de la commande "S".
<?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="5cm" height="4cm" viewBox="0 0 500 400"
xmlns="http://www.w3.org/2000/svg">
<title>Exemple troisièmeDegré01- commandes Bézier cubique
dans les données de tracé</title>
<desc>Image montrant un exemple simple de données de tracé
utilisant des commandes "C" et "S", avec des annotations montrant
les points de contrôle en début et en fin de courbe.</desc>
<style type="text/css"><![CDATA[
.Bordure { fill:none; stroke:blue; stroke-width:1 }
.Relier { fill:none; stroke:#888888; stroke-width:2 }
.ExpTrace { fill:none; stroke:red; stroke-width:5 }
.PointFin { fill:none; stroke:#888888; stroke-width:2 }
.PointCtrl { fill:#888888; stroke:none }
.PointCtrlAuto { fill:none; stroke:blue; stroke-width:4 }
.Label { font-size:22; font-family:Verdana }
]]></style>
<rect class="Bordure" x="1" y="1" width="498" height="398" />
<polyline class="Relier" points="100,200 100,100" />
<polyline class="Relier" points="250,100 250,200" />
<polyline class="Relier" points="250,200 250,300" />
<polyline class="Relier" points="400,300 400,200" />
<path class="ExpTrace" d="M100,200 C100,100 250,100 250,200
S400,300 400,200" />
<circle class="PointFin" cx="100" cy="200" r="10" />
<circle class="PointFin" cx="250" cy="200" r="10" />
<circle class="PointFin" cx="400" cy="200" r="10" />
<circle class="PointCtrl" cx="100" cy="100" r="10" />
<circle class="PointCtrl" cx="250" cy="100" r="10" />
<circle class="PointCtrl" cx="400" cy="300" r="10" />
<circle class="PointCtrlAuto" cx="250" cy="300" r="9" />
<text class="Label" x="25" y="70">M100,200 C100,100 250,100 250,200</text>
<text class="Label" x="325" y="350"
style="text-anchor:middle">S400,300 400,200</text>
</svg>
 |
Voir cet exemple en SVG (navigateur gérant SVG et CSS seulement)
L'image suivante montre comment certaines courbes de Bézier cubique changent leur forme en fonction de la position des points de contrôle. Les cinq premiers exemples illustre un seul segment de courbe de Bézier cubique. L'exemple au coin inférieur droit montre une commande "C" suivie par une commande "S".
Voir cet exemple en SVG (seulement avec navigateur gérant SVG)
Les commandes de courbe de Bézier quadratique sont comme suit :
| Commande | Nom | Paramètres | Description |
|---|---|---|---|
| Q (absolue) q (relative) |
curveto Bézier quadratique | (x1 y1 x y)+ | Dessine une courbe de Bézier quadratique, du point courant jusqu'au point (x,y), en utilisant le point (x1,y1) comme point de contrôle. Un Q (majuscule) annonce que des coordonnées absolues vont suivre, un q (minuscule) des coordonnées relatives. On peut spécifier plusieurs jeux de coordonnées pour le dessin d'un polybézier. Une fois la commande exécutée, le nouveau point courant devient la paire de coordonnées finale (x,y) utilisée dans le polybézier. |
| T (absolue) t (relative) |
curveto Bézier quadratique raccourci/lissé | (x y)+ | Dessine une courbe de Bézier quadratique, du point courant jusqu'au point (x,y). Le point de contrôle est sensé être le reflet du point de contrôle de la commande précédente par rapport au point de contrôle. (S'il n'y a pas de commande précédente ou si celle-ci n'était pas une Q, q, T ou t, le point de contrôle est sensé coïncider avec le point courant). Un T (majuscule) annonce que des coordonnées absolues vont suivre, un t (minuscule) des coordonnées relatives. Une fois la commande exécutée, le nouveau point courant devient la paire de coordonnées finale (x,y) utilisée dans le polybézier. |
L'exemple deuxièmeDegré01 montre certaines utilisations simples des commandes de courbe de Bézier quadratique dans un tracé. Remarquer que le point de contrôle pour la commmande "T" est calculé automatiquement comme étant le reflet du point de contrôle de la commande "Q" précédente par rapport au point de départ de la commande "T".
<?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="6cm" viewBox="0 0 1200 600"
xmlns="http://www.w3.org/2000/svg">
<title>Exemple deuxièmeDegré - commandes Bézier quadratique
dans les données de tracé</title>
<desc>Image montrant des commandes "Q" et "T",
avec des annotations montrant les points de contrôle et
les points finaux</desc>
<rect x="1" y="1" width="1198" height="598"
fill="none" stroke="blue" stroke-width="1" />
<path d="M200,300 Q400,50 600,300 T1000,300"
fill="none" stroke="red" stroke-width="5" />
<!-- Points finaux -->
<g fill="black" >
<circle cx="200" cy="300" r="10"/>
<circle cx="600" cy="300" r="10"/>
<circle cx="1000" cy="300" r="10"/>
</g>
<!-- Points de contrôle et lignes des points finaux jusqu'aux points de contrôle -->
<g fill="#888888" >
<circle cx="400" cy="50" r="10"/>
<circle cx="800" cy="550" r="10"/>
</g>
<path d="M200,300 L400,50 L600,300
L800,550 L1000,300"
fill="none" stroke="#888888" stroke-width="2" />
</svg>
 |
Voir cet exemple en SVG (seulement avec navigateur gérant SVG)
Les commandes de courbe d'arc elliptique sont comme suit :
| Commande | Nom | Paramètres | Description |
|---|---|---|---|
| A (absolue) a (relative) |
arc elliptique | (rx ry rotation-axe-x drapeau-arc-large drapeau-balayage x y)+ | Dessine un arc elliptique, du point courant jusqu'au point (x, y). La taille et l'orientation de l'ellipse sont définies par deux rayons (rx, ry) et une valeur de rotation sur l'axe-x rotation-axe-x, qui indique la rotation de l'ellipse dans son ensemble par rapport au système de coordonnées courant. Le centre de l'ellipse (cx, cy) est calculé automatiquement pour satisfaire aux contraintes imposées par les autres paramètres. Les valeurs drapeau-arc-large et drapeau-balayage contribuent à ce calcul automatique et aident à déterminer le dessin de l'arc. |
L'exemple arcs01 montre quelques usages simples des commandes d'arc dans un tracé.
<?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="5.25cm" viewBox="0 0 1200 400"
xmlns="http://www.w3.org/2000/svg">
<title>Exemple arcs01 - commandes d'arc dans des données de tracé</title>
<desc>Image d'un diagramme en "camembert" en deux parts
et une ligne avec des arcs en écho.</desc>
<rect x="1" y="1" width="1198" height="398"
fill="none" stroke="blue" stroke-width="1" />
<path d="M300,200 h-150 a150,150 0 1,0 150,-150 z"
fill="red" stroke="blue" stroke-width="5" />
<path d="M275,175 v-150 a150,150 0 0,0 -150,150 z"
fill="yellow" stroke="blue" stroke-width="5" />
<path d="M600,350 l 50,-25
a25,25 -30 0,1 50,-25 l 50,-25
a25,50 -30 0,1 50,-25 l 50,-25
a25,75 -30 0,1 50,-25 l 50,-25
a25,100 -30 0,1 50,-25 l 50,-25"
fill="none" stroke="red" stroke-width="5" />
</svg>
 |
Voir cet exemple en SVG (seulement avec navigateur gérant SVG)
La commande d'arc elliptique dessine une section d'ellipse qui obéit aux contraintes suivantes :
Ce qui suit illustre les quatre combinaisons de valeur de drapeau-arc-large et drapeau-balayage et les quatre arcs différents dessinés en fonction des valeurs de ces drapeaux. Pour chaque cas, on a utilisé les données de tracé suivantes :
<path d="M 125,75 a100,50 0 ?,? 100,50"
style="fill:none; stroke:red; stroke-width:6"/>
dans lequel on remplace "?,?" par les valeurs "0,0", "0,1", "1,0" et "1,1" qui rendent compte des quatre cas possibles.
Voir cet exemple en SVG (seulement avec navigateur gérant SVG)
Se reporter à la section Remarques sur l'implémentation des arcs elliptiques pour les détails d'implémentation des commandes d'arc elliptiques dans les données de tracé.
On utilise la notation suivante pour une description dans la forme Backus-Naur (FBN) de la grammaire des données de tracé :
Voici la FBN pour les tracés SVG.
svg-path:
wsp* moveto-drawto-command-groups? wsp*
moveto-drawto-command-groups:
moveto-drawto-command-group
| moveto-drawto-command-group wsp* moveto-drawto-command-groups
moveto-drawto-command-group:
moveto wsp* drawto-commands?
drawto-commands:
drawto-command
| drawto-command wsp* drawto-commands
drawto-command:
closepath
| lineto
| horizontal-lineto
| vertical-lineto
| curveto
| smooth-curveto
| quadratic-bezier-curveto
| smooth-quadratic-bezier-curveto
| elliptical-arc
moveto:
( "M" | "m" ) wsp* moveto-argument-sequence
moveto-argument-sequence:
coordinate-pair
| coordinate-pair comma-wsp? lineto-argument-sequence
closepath:
("Z" | "z")
lineto:
( "L" | "l" ) wsp* lineto-argument-sequence
lineto-argument-sequence:
coordinate-pair
| coordinate-pair comma-wsp? lineto-argument-sequence
horizontal-lineto:
( "H" | "h" ) wsp* horizontal-lineto-argument-sequence
horizontal-lineto-argument-sequence:
coordinate
| coordinate comma-wsp? horizontal-lineto-argument-sequence
vertical-lineto:
( "V" | "v" ) wsp* vertical-lineto-argument-sequence
vertical-lineto-argument-sequence:
coordinate
| coordinate comma-wsp? vertical-lineto-argument-sequence
curveto:
( "C" | "c" ) wsp* curveto-argument-sequence
curveto-argument-sequence:
curveto-argument
| curveto-argument comma-wsp? curveto-argument-sequence
curveto-argument:
coordinate-pair comma-wsp? coordinate-pair comma-wsp? coordinate-pair
smooth-curveto:
( "S" | "s" ) wsp* smooth-curveto-argument-sequence
smooth-curveto-argument-sequence:
smooth-curveto-argument
| smooth-curveto-argument comma-wsp? smooth-curveto-argument-sequence
smooth-curveto-argument:
coordinate-pair comma-wsp? coordinate-pair
quadratic-bezier-curveto:
( "Q" | "q" ) wsp* quadratic-bezier-curveto-argument-sequence
quadratic-bezier-curveto-argument-sequence:
quadratic-bezier-curveto-argument
| quadratic-bezier-curveto-argument comma-wsp?
quadratic-bezier-curveto-argument-sequence
quadratic-bezier-curveto-argument:
coordinate-pair comma-wsp? coordinate-pair
smooth-quadratic-bezier-curveto:
( "T" | "t" ) wsp* smooth-quadratic-bezier-curveto-argument-sequence
smooth-quadratic-bezier-curveto-argument-sequence:
coordinate-pair
| coordinate-pair comma-wsp? smooth-quadratic-bezier-curveto-argument-sequence
elliptical-arc:
( "A" | "a" ) wsp* elliptical-arc-argument-sequence
elliptical-arc-argument-sequence:
elliptical-arc-argument
| elliptical-arc-argument comma-wsp? elliptical-arc-argument-sequence
elliptical-arc-argument:
nonnegative-number comma-wsp? nonnegative-number comma-wsp?
number comma-wsp flag comma-wsp flag comma-wsp coordinate-pair
coordinate-pair:
coordinate comma-wsp? coordinate
coordinate:
number
nonnegative-number:
integer-constant
| floating-point-constant
number:
sign? integer-constant
| sign? floating-point-constant
flag:
"0" | "1"
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)
Le traitement du FBN doit consommer autant que possible de la production d'une FBN donnée, s'interrompant là où la rencontre d'un caractère ne s'accorde plus avec la production. Ainsi, dans la chaîne "M 100-200", la première coordonné de la commande "moveto" consomme les caractères "100" et s'interrompt à la rencontre du signe moins parce que celui-ci ne peut suivre un chiffre dans la production d'une « coordonnée ». En résultat, la première coordonnée sera "100" et la seconde "-200".
De la même façon, pour la chaîne "M 0.6.5", la première coordonnée de la commande "moveto" consomme les caractères "0.6" et s'interrompt à la rencontre du second point décimal parce que la production d'une « coordonnée » n'admet qu'un seul point décimal. En résultat, la première coordonnée sera "0.6" et la seconde ".5".
Des opérations variées, dont le texte sur un tracé et l'animation du mouvement et les diverses opérations sur les liserés, requièrent de l'agent utilisateur qu'il calcule la distance au long de la géométrie d'un élément graphique, tel qu'un élément 'path'.
Des opérations mathématiques précises existent pour le calcul de la distance au long d'un tracé, mais les formules sont complexes et demandent des calculs substantiels. On recommande que les outils d'édition et les agents utilisateurs utilisent des algorithmes donnant des résultats aussi précis que possible ; cependant, pour pallier aux différences d'implémentation et pour aider au calcul d'une distance qui produit un résultat approchant l'intention de l'auteur, on peut utiliser l'attribut pathLength pour préciser le calcul de l'auteur pour la longueur totale du tracé, de manière à ce que l'agent utilisateur puisse ajuster le calcul de la distance au long du tracé, utilisant le ratio indiqué par l'attribut pathLength, avec la propre valeur qu'il a calculé pour cette longueur totale du tracé.
Une opération "moveto" dans un élément 'path' est définie
comme ayant une longueur égale à zéro. Seules les diverses commandes "lineto", "curveto" et "arcto"
contribuent au calcul de la longueur du tracé.
Les interfaces suivantes sont définies ci-dessous : SVGPathSeg, SVGPathSegClosePath, SVGPathSegMovetoAbs, SVGPathSegMovetoRel, SVGPathSegLinetoAbs, SVGPathSegLinetoRel, SVGPathSegCurvetoCubicAbs, SVGPathSegCurvetoCubicRel, SVGPathSegCurvetoQuadraticAbs, SVGPathSegCurvetoQuadraticRel, SVGPathSegArcAbs, SVGPathSegArcRel, SVGPathSegLinetoHorizontalAbs, SVGPathSegLinetoHorizontalRel, SVGPathSegLinetoVerticalAbs, SVGPathSegLinetoVerticalRel, SVGPathSegCurvetoCubicSmoothAbs, SVGPathSegCurvetoCubicSmoothRel, SVGPathSegCurvetoQuadraticSmoothAbs, SVGPathSegCurvetoQuadraticSmoothRel, SVGPathSegList, SVGAnimatedPathData, SVGPathElement.
L'interface SVGPathSeg est une interface de base qui correspond à une seule commande dans une spécification de données de tracé.
interface SVGPathSeg {
// Types de segment de tracé
const unsigned short PATHSEG_UNKNOWN = 0;
const unsigned short PATHSEG_CLOSEPATH = 1;
const unsigned short PATHSEG_MOVETO_ABS = 2;
const unsigned short PATHSEG_MOVETO_REL = 3;
const unsigned short PATHSEG_LINETO_ABS = 4;
const unsigned short PATHSEG_LINETO_REL = 5;
const unsigned short PATHSEG_CURVETO_CUBIC_ABS = 6;
const unsigned short PATHSEG_CURVETO_CUBIC_REL = 7;
const unsigned short PATHSEG_CURVETO_QUADRATIC_ABS = 8;
const unsigned short PATHSEG_CURVETO_QUADRATIC_REL = 9;
const unsigned short PATHSEG_ARC_ABS = 10;
const unsigned short PATHSEG_ARC_REL = 11;
const unsigned short PATHSEG_LINETO_HORIZONTAL_ABS = 12;
const unsigned short PATHSEG_LINETO_HORIZONTAL_REL = 13;
const unsigned short PATHSEG_LINETO_VERTICAL_ABS = 14;
const unsigned short PATHSEG_LINETO_VERTICAL_REL = 15;
const unsigned short PATHSEG_CURVETO_CUBIC_SMOOTH_ABS = 16;
const unsigned short PATHSEG_CURVETO_CUBIC_SMOOTH_REL = 17;
const unsigned short PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS = 18;
const unsigned short PATHSEG_CURVETO_QUADRATIC_SMOOTH_REL = 19;
readonly attribute unsigned short pathSegType;
readonly attribute DOMString pathSegTypeAsLetter;
};
| PATHSEG_UNKNOWN | Le type d'unité ne fait pas partie de ceux prédéfinis. Tenter de définir une valeur de ce type ou tenter de changer une valeur existante vers ce type est illégal. | |
| PATHSEG_CLOSEPATH | Correspond à une commande de données de tracé "closepath" (z). | |
| PATHSEG_MOVETO_ABS | Correspond à une commande de données de tracé "moveto absolue" (M). | |
| PATHSEG_MOVETO_REL | Correspond à une commande de données de tracé "moveto relative" (m). | |
| PATHSEG_LINETO_ABS | Correspond à une commande de données de tracé "lineto absolue" (L). | |
| PATHSEG_LINETO_REL | Correspond à une commande de données de tracé "lineto relative" (l). | |
| PATHSEG_CURVETO_CUBIC_ABS | Correspond à une commande de données de tracé "curveto Bézier cubique absolue" (C). | |
| PATHSEG_CURVETO_CUBIC_REL | Correspond à une commande de données de tracé "curveto Bézier cubique relative" (c). | |
| PATHSEG_CURVETO_QUADRATIC_ABS | Correspond à une commande de données de tracé "curveto Bézier quadratique absolue" (Q). | |
| PATHSEG_CURVETO_QUADRATIC_REL | Correspond à une commande de données de tracé "curveto Bézier quadratique relative" (q). | |
| PATHSEG_ARC_ABS | Correspond à une commande de données de tracé "arcto absolue" (A). | |
| PATHSEG_ARC_REL | Correspond à une commande de données de tracé "arcto relative" (a). | |
| PATHSEG_LINETO_HORIZONTAL_ABS | Correspond à une commande de données de tracé "lineto horizontal absolue" (H). | |
| PATHSEG_LINETO_HORIZONTAL_REL | Correspond à une commande de données de tracé "lineto horizontal relative" (h). | |
| PATHSEG_LINETO_VERTICAL_ABS | Correspond à une commande de données de tracé "lineto vertical absolue" (V). | |
| PATHSEG_LINETO_VERTICAL_REL | Correspond à une commande de données de tracé "lineto vertical relative" (v). | |
| PATHSEG_CURVETO_CUBIC_SMOOTH_ABS | Correspond à une commande de données de tracé "curveto du troisième degré lissée absolue" (S). | |
| PATHSEG_CURVETO_CUBIC_SMOOTH_REL | Correspond à une commande de données de tracé "curveto du troisième degré lissée relative" (s). | |
| PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS | Correspond à une commande de données de tracé "curveto du deuxième degré lissée absolue" (T). | |
| PATHSEG_CURVETO_QUADRATIC_SMOOTH_REL | Correspond à une commande de données de tracé "curveto du deuxième degré lissée relative" (t). |
L'interface SVGPathSegClosePath correspond à une commande de données de tracé "closepath" (z).
interface SVGPathSegClosePath : SVGPathSeg {};
L'interface SVGPathSegMovetoAbs correspond à une commande de données de tracé "moveto absolue" (M).
interface SVGPathSegMovetoAbs : SVGPathSeg {
attribute float x;
// déclenche une DOMException à l'initialisation
attribute float y;
// déclenche une DOMException à 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.
|
| 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 SVGPathSegMovetoRel correspond à une commande de données de tracé "moveto relative" (m).
interface SVGPathSegMovetoRel : SVGPathSeg {
attribute float x;
// déclenche une DOMException à l'initialisation
attribute float y;
// déclenche une DOMException à 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.
|
| 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 SVGPathSegLinetoAbs correspond à une commande de données de tracé "lineto absolue" (L).
interface SVGPathSegLinetoAbs : SVGPathSeg {
attribute float x;
// déclenche une DOMException à l'initialisation
attribute float y;
// déclenche une DOMException à 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.
|
| 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 SVGPathSegLinetoRel correspond à une commande de données de tracé "lineto relative" (l).
interface SVGPathSegLinetoRel : SVGPathSeg {
attribute float x;
// déclenche une DOMException à l'initialisation
attribute float y;
// déclenche une DOMException à 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.
|
| 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 SVGPathSegCurvetoCubicAbs correspond à une commande de données de tracé "curveto Bézier cubique absolue" (C).
interface SVGPathSegCurvetoCubicAbs : SVGPathSeg {
attribute float x;
// déclenche une DOMException à l'initialisation
attribute float y;
// déclenche une DOMException à l'initialisation
attribute float x1;
// déclenche une DOMException à l'initialisation
attribute float y1;
// déclenche une DOMException à l'initialisation
attribute float x2;
// déclenche une DOMException à l'initialisation
attribute float y2;
// déclenche une DOMException à 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.
|
| DOMException |
NO_MODIFICATION_ALLOWED_ERR : déclenchée lors d'une tentative de modification de la valeur d'un attribut en lecture seule.
|
| DOMException |
NO_MODIFICATION_ALLOWED_ERR : déclenchée lors d'une tentative de modification de la valeur d'un attribut en lecture seule.
|
| DOMException |
NO_MODIFICATION_ALLOWED_ERR : déclenchée lors d'une tentative de modification de la valeur d'un attribut en lecture seule.
|
| DOMException |
NO_MODIFICATION_ALLOWED_ERR : déclenchée lors d'une tentative de modification de la valeur d'un attribut en lecture seule.
|
| 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 SVGPathSegCurvetoCubicRel correspond à une commande de données de tracé "curveto Bézier cubique relative" (c).
interface SVGPathSegCurvetoCubicRel : SVGPathSeg {
attribute float x;
// déclenche une DOMException à l'initialisation
attribute float y;
// déclenche une DOMException à l'initialisation
attribute float x1;
// déclenche une DOMException à l'initialisation
attribute float y1;
// déclenche une DOMException à l'initialisation
attribute float x2;
// déclenche une DOMException à l'initialisation
attribute float y2;
// déclenche une DOMException à 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.
|
| DOMException |
NO_MODIFICATION_ALLOWED_ERR : déclenchée lors d'une tentative de modification de la valeur d'un attribut en lecture seule.
|
| DOMException |
NO_MODIFICATION_ALLOWED_ERR : déclenchée lors d'une tentative de modification de la valeur d'un attribut en lecture seule.
|
| DOMException |
NO_MODIFICATION_ALLOWED_ERR : déclenchée lors d'une tentative de modification de la valeur d'un attribut en lecture seule.
|
| DOMException |
NO_MODIFICATION_ALLOWED_ERR : déclenchée lors d'une tentative de modification de la valeur d'un attribut en lecture seule.
|
| 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 SVGPathSegCurvetoQuadraticAbs correspond à une commande de données de tracé "curveto Bézier quadratique absolue" (Q).
interface SVGPathSegCurvetoQuadraticAbs : SVGPathSeg {
attribute float x;
// déclenche une DOMException à l'initialisation
attribute float y;
// déclenche une DOMException à l'initialisation
attribute float x1;
// déclenche une DOMException à l'initialisation
attribute float y1;
// déclenche une DOMException à 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.
|
| DOMException |
NO_MODIFICATION_ALLOWED_ERR : déclenchée lors d'une tentative de modification de la valeur d'un attribut en lecture seule.
|
| DOMException |
NO_MODIFICATION_ALLOWED_ERR : déclenchée lors d'une tentative de modification de la valeur d'un attribut en lecture seule.
|
| 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 SVGPathSegCurvetoQuadraticRel correspond à une commande de données de tracé "curveto Bézier quadratique relative" (q).
interface SVGPathSegCurvetoQuadraticRel : SVGPathSeg {
attribute float x;
// déclenche une DOMException à l'initialisation
attribute float y;
// déclenche une DOMException à l'initialisation
attribute float x1;
// déclenche une DOMException à l'initialisation
attribute float y1;
// déclenche une DOMException à 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.
|
| DOMException |
NO_MODIFICATION_ALLOWED_ERR : déclenchée lors d'une tentative de modification de la valeur d'un attribut en lecture seule.
|
| DOMException |
NO_MODIFICATION_ALLOWED_ERR : déclenchée lors d'une tentative de modification de la valeur d'un attribut en lecture seule.
|
| 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 SVGPathSegArcAbs correspond à une commande de données de tracé "arcto absolue" (A).
interface SVGPathSegArcAbs : SVGPathSeg {
attribute float x;
// déclenche une DOMException à l'initialisation
attribute float y;
// déclenche une DOMException à l'initialisation
attribute float r1;
// déclenche une DOMException à l'initialisation
attribute float r2;
// déclenche une DOMException à l'initialisation
attribute float angle;
// déclenche une DOMException à l'initialisation
attribute boolean largeArcFlag;
// déclenche une DOMException à l'initialisation
attribute boolean sweepFlag;
// déclenche une DOMException à 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.
|
| DOMException |
NO_MODIFICATION_ALLOWED_ERR : déclenchée lors d'une tentative de modification de la valeur d'un attribut en lecture seule.
|
| DOMException |
NO_MODIFICATION_ALLOWED_ERR : déclenchée lors d'une tentative de modification de la valeur d'un attribut en lecture seule.
|
| DOMException |
NO_MODIFICATION_ALLOWED_ERR : déclenchée lors d'une tentative de modification de la valeur d'un attribut en lecture seule.
|
| DOMException |
NO_MODIFICATION_ALLOWED_ERR : déclenchée lors d'une tentative de modification de la valeur d'un attribut en lecture seule.
|
| DOMException |
NO_MODIFICATION_ALLOWED_ERR : déclenchée lors d'une tentative de modification de la valeur d'un attribut en lecture seule.
|
| 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 SVGPathSegArcRel correspond à une commande de données de tracé "arcto relative" (a).
interface SVGPathSegArcRel : SVGPathSeg {
attribute float x;
// déclenche une DOMException à l'initialisation
attribute float y;
// déclenche une DOMException à l'initialisation
attribute float r1;
// déclenche une DOMException à l'initialisation
attribute float r2;
// déclenche une DOMException à l'initialisation
attribute float angle;
// déclenche une DOMException à l'initialisation
attribute boolean largeArcFlag;
// déclenche une DOMException à l'initialisation
attribute boolean sweepFlag;
// déclenche une DOMException à 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.
|
| DOMException |
NO_MODIFICATION_ALLOWED_ERR : déclenchée lors d'une tentative de modification de la valeur d'un attribut en lecture seule.
|
| DOMException |
NO_MODIFICATION_ALLOWED_ERR : déclenchée lors d'une tentative de modification de la valeur d'un attribut en lecture seule.
|
| DOMException |
NO_MODIFICATION_ALLOWED_ERR : déclenchée lors d'une tentative de modification de la valeur d'un attribut en lecture seule.
|
| DOMException |
NO_MODIFICATION_ALLOWED_ERR : déclenchée lors d'une tentative de modification de la valeur d'un attribut en lecture seule.
|
| DOMException |
NO_MODIFICATION_ALLOWED_ERR : déclenchée lors d'une tentative de modification de la valeur d'un attribut en lecture seule.
|
| 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 SVGPathSegLinetoHorizontalAbs correspond à une commande de données de tracé "lineto horizontal absolue" (H).
interface SVGPathSegLinetoHorizontalAbs : SVGPathSeg {
attribute float x;
// déclenche une DOMException à 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 SVGPathSegLinetoHorizontalRel correspond à une commande de données de tracé "lineto horizontal relative" (h).
interface SVGPathSegLinetoHorizontalRel : SVGPathSeg {
attribute float x;
// déclenche une DOMException à 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 SVGPathSegLinetoVerticalAbs correspond à une commande de données de tracé "lineto vertical absolue" (V).
interface SVGPathSegLinetoVerticalAbs : SVGPathSeg {
attribute float y;
// déclenche une DOMException à 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 SVGPathSegLinetoVerticalRel correspond à une commande de données de tracé "lineto vertical relative" (v).
interface SVGPathSegLinetoVerticalRel : SVGPathSeg {
attribute float y;
// déclenche une DOMException à 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 SVGPathSegCurvetoCubicSmoothAbs correspond à une commande de données de tracé "curveto du troisième degré lissée absolue" (S).
interface SVGPathSegCurvetoCubicSmoothAbs : SVGPathSeg {
attribute float x;
// déclenche une DOMException à l'initialisation
attribute float y;
// déclenche une DOMException à l'initialisation
attribute float x2;
// déclenche une DOMException à l'initialisation
attribute float y2;
// déclenche une DOMException à 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.
|
| DOMException |
NO_MODIFICATION_ALLOWED_ERR : déclenchée lors d'une tentative de modification de la valeur d'un attribut en lecture seule.
|
| DOMException |
NO_MODIFICATION_ALLOWED_ERR : déclenchée lors d'une tentative de modification de la valeur d'un attribut en lecture seule.
|
| 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 SVGPathSegCurvetoCubicSmoothRel correspond à une commande de données de tracé "curveto du troisième degré lissée relative" (s).
interface SVGPathSegCurvetoCubicSmoothRel : SVGPathSeg {
attribute float x;
// déclenche une DOMException à l'initialisation
attribute float y;
// déclenche une DOMException à l'initialisation
attribute float x2;
// déclenche une DOMException à l'initialisation
attribute float y2;
// déclenche une DOMException à 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.
|
| DOMException |
NO_MODIFICATION_ALLOWED_ERR : déclenchée lors d'une tentative de modification de la valeur d'un attribut en lecture seule.
|
| DOMException |
NO_MODIFICATION_ALLOWED_ERR : déclenchée lors d'une tentative de modification de la valeur d'un attribut en lecture seule.
|
| 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 SVGPathSegCurvetoQuadraticSmoothAbs correspond à une commande de données de tracé "curveto du deuxième degré lissée absolue" (T).
interface SVGPathSegCurvetoQuadraticSmoothAbs : SVGPathSeg {
attribute float x;
// déclenche une DOMException à l'initialisation
attribute float y;
// déclenche une DOMException à 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.
|
| 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 SVGPathSegCurvetoQuadraticSmoothRel correspond à une commande de données de tracé "curveto du deuxième degré lissée relative" (t).
interface SVGPathSegCurvetoQuadraticSmoothRel : SVGPathSeg {
attribute float x;
// déclenche une DOMException à l'initialisation
attribute float y;
// déclenche une DOMException à 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.
|
| DOMException |
NO_MODIFICATION_ALLOWED_ERR : déclenchée lors d'une tentative de modification de la valeur d'un attribut en lecture seule.
|
Cette interface définit une liste d'objets SVGPathSeg.
L'interface SVGPathSegList 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.
interface SVGPathSegList {
readonly attribute unsigned long numberOfItems;
void clear ( )
raises( DOMException );
SVGPathSeg initialize ( in SVGPathSeg newItem )
raises( DOMException, SVGException );
SVGPathSeg getItem ( in unsigned long index )
raises( DOMException );
SVGPathSeg insertItemBefore ( in SVGPathSeg newItem, in unsigned long index )
raises( DOMException, SVGException );
SVGPathSeg replaceItem ( in SVGPathSeg newItem, in unsigned long index )
raises( DOMException, SVGException );
SVGPathSeg removeItem ( in unsigned long index )
raises( DOMException );
SVGPathSeg appendItem ( in SVGPathSeg newItem )
raises( DOMException, SVGException );
};
| DOMException |
NO_MODIFICATION_ALLOWED_ERR : déclenchée quand la liste ne peut être modifiée.
|
| in SVGPathSeg newItem | L'item qui devrait devenir le seul membre de la liste. |
| SVGPathSeg | L'item en cours d'insertion dans la liste. |
| 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 un objet du bon type pour la liste donnée.
|
| in unsigned long index | L'index de l'item de la liste qui doit être retourné. Le premier item a le numéro 0. |
| SVGPathSeg | L'item sélectionné. |
| 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.
|
| in SVGPathSeg 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 est égal à 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. |
| SVGPathSeg | L'item inséré. |
| 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 un objet du bon type pour la liste donnée.
|
| in SVGPathSeg 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éo 0. |
| SVGPathSeg | L'item inséré. |
| 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 un objet du bon type pour la liste donnée.
|
| in unsigned long index | L'index de l'item qui doit être retiré. Le premier item a le numéro 0. |
| SVGPathSeg | L'item retiré. |
| 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.
|
| in SVGPathSeg newItem | L'item qui doit être inséré dans la liste. Le premier item a le numéro 0. |
| SVGPathSeg | L'item inséré. |
| 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 un objet du bon type pour la liste donnée.
|
L'interface SVGAnimatedPathData gère les éléments qui ont un attribut 'd' contenant des données de tracé SVG et gère la capacité d'animation de cet attribut.
L'interface SVGAnimatedPathData fournit deux listes pour accéder et modifier le contenu de base (i.e., statique) de l'attribut d :
ainsi que deux liste pour accéder aux valeurs animées courantes de l'attribut d :
Chacune des deux listes restent toujours synchronisée. Les modifications apportées à une liste seront immédiatement répercutées sur la liste correspondante. Des modifications de l'attribut normalizedPathSegList pourraient provoquer l'éclatement des entrées de l'attribut pathSegList en un jeu de segments de tracé normalisé.
De plus, l'attribut 'd' de l'élément, accédé via le DOM de XML (i.e., en utilisant un appel de la méthode getAttribute()) reflétera tout changement effectué sur les attributs pathSegList ou normalizedPathSegList.
interface SVGAnimatedPathData {
readonly attribute SVGPathSegList pathSegList;
readonly attribute SVGPathSegList normalizedPathSegList;
readonly attribute SVGPathSegList animatedPathSegList;
readonly attribute SVGPathSegList animatedNormalizedPathSegList;
};
Offre un accès au contenu de base (i.e., statique) de l'attribut d, sous une forme qui correspond, un-à-un, avec la syntaxe de SVG. Ainsi, si l'attribut d possède une commande "moveto absolue (M)" et une commande "arcto absolue (A)", alors l'attribut pathSegList aura les deux entrées SVG_PATHSEG_MOVETO_ABS et SVG_PATHSEG_ARC_ABS.
Offre un accès au contenu de base (i.e., statique) de l'attribut d, sous une forme où toutes les commandes de données de tracé sont exprimées en termes du sous-ensemble des types SVGPathSeg suivant : SVG_PATHSEG_MOVETO_ABS (M), SVG_PATHSEG_LINETO_ABS (L), SVG_PATHSEG_CURVETO_CUBIC_ABS (C) et SVG_PATHSEG_CLOSEPATH (z). Ainsi, si l'attribut d possède une commande "moveto absolue (M)" et une commande "arcto absolue (A)", alors l'attribut pathSegList aura une entrée SVG_PATHSEG_MOVETO_ABS, suivie par une série d'entrées SVG_PATHSEG_LINETO_ABS pour une approximation de l'arc. Cette représentation alternative disponible offre une interface simplifiée aux développeurs tirant parti d'un jeu de commandes restreint.
Les seuls types valides pour l'interface SVGPathSeg sont SVG_PATHSEG_MOVETO_ABS (M), SVG_PATHSEG_LINETO_ABS (L), SVG_PATHSEG_CURVETO_CUBIC_ABS (C) et SVG_PATHSEG_CLOSEPATH (z).
Offre un accès au contenu animé courant de l'attribut d, sous une forme qui correspond, un-à-un, avec la syntaxe de SVG. 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 en lecture seule. Si l'attribut donné, ou la propriété, n'est pas en cours d'animation, contient la même valeur que 'pathSegList'.
Offre un accès au contenu animé courant de l'attribut d, sous une forme où toutes les commandes de données de tracé sont exprimées en termes du sous-ensemble de types SVGPathSeg suivant SVG_PATHSEG_MOVETO_ABS (M), SVG_PATHSEG_LINETO_ABS (L), SVG_PATHSEG_CURVETO_CUBIC_ABS (C) et SVG_PATHSEG_CLOSEPATH (z). 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 en lecture seule. Si l'attribut donné, ou la propriété, n'est pas en cours d'animation, contient la même valeur que 'pathSegList'.
L'interface SVGPathElement correspond à l'élément 'path'.
interface SVGPathElement :
SVGElement,
SVGTests,
SVGLangSpace,
SVGExternalResourcesRequired,
SVGStylable,
SVGTransformable,
events::EventTarget,
SVGAnimatedPathData {
readonly attribute SVGAnimatedNumber pathLength;
float getTotalLength ( );
SVGPoint getPointAtLength ( in float distance );
unsigned long getPathSegAtLength ( in float distance );
SVGPathSegClosePath createSVGPathSegClosePath ( );
SVGPathSegMovetoAbs createSVGPathSegMovetoAbs ( in float x, in float y );
SVGPathSegMovetoRel createSVGPathSegMovetoRel ( in float x, in float y );
SVGPathSegLinetoAbs createSVGPathSegLinetoAbs ( in float x, in float y );
SVGPathSegLinetoRel createSVGPathSegLinetoRel ( in float x, in float y );
SVGPathSegCurvetoCubicAbs createSVGPathSegCurvetoCubicAbs ( in float x, in float y, in float x1, in float y1, in float x2, in float y2 );
SVGPathSegCurvetoCubicRel createSVGPathSegCurvetoCubicRel ( in float x, in float y, in float x1, in float y1, in float x2, in float y2 );
SVGPathSegCurvetoQuadraticAbs createSVGPathSegCurvetoQuadraticAbs ( in float x, in float y, in float x1, in float y1 );
SVGPathSegCurvetoQuadraticRel createSVGPathSegCurvetoQuadraticRel ( in float