Table des matières PDF

Dessin vectoriel : formes d'usage général

1. Formes simples

1.a. Rectangle

L'élément rect a les attributs x, y, width et height.

<draw name="figureA" width="200" height="200" pdf-scale="0.5"> 
    <rect x="100" y="100" width="50" height="30" stroke="red" fill="none"/>
</draw>                 
                
figureA.svgFigure pleine page

1.b. Arc d'ellipse

L'élément arc a les attributs cx, cy, rx, ry, a1, a2 et n.

<draw name="figureB" width="200" height="200" pdf-scale="0.5">
    <arc cx="100" cy="100" rx="50" ry="50" a1="0" a2="90" n="50"
            stroke="red" stroke-width="2" fill="yellow"/>
</draw>             
                
figureB.svgFigure pleine page

En jouant sur le nombre de points, on peut obtenir un polyèdre :

 
<draw name="figureC" width="200" height="200" pdf-scale="0.5">  
    <arc cx="100" cy="100" rx="50" ry="50" a1="0" a2="360" n="5"
            stroke="red" stroke-width="2" fill="yellow"/>  
</draw>              
                
figureC.svgFigure pleine page

1.c. Cercle

Le cercle est un cas particulier de l'élément arc. Il y a toutefois un élément circle qui ne nécessite pas de nombre de points (tracé avec des arcs de Bézier).

<draw name="figureC2" width="200" height="200" pdf-scale="0.5">  
    <circle cx="100" cy="100" r="50" stroke="red" 
                    stroke-width="2" fill="gray"/>
    <circle cx="100" cy="100" r="10" stroke="blue" fill="none" q="2"/>
</draw>               
                
figureC2.svgFigure pleine page

L'attribut q (valeurs 1,2,3 ou 4) permet de tracer une portion du cercle.

1.d. Flèches

Une flèche rectiligne est obtenue avec l'élément arrow qui contient les mêmes attributs que line avec en plus les attributs start et end précisant le nom d'un marqueur (voir plus loin pour les marqueurs prédéfinis). L'attribut scale précise le facteur d'échelle du marqueur. Le marqueur est tracé à une taille indépendante de la transformation affine en cours (comme les caractères).

<draw name="figureD" width="200" height="200" pdf-scale="0.5"
        <arrow x1="10" y1="10" x2="100" y2="30" start="none" end="arrowA" scale="5"/> 
        <rect x="10" y="65" width="50" height="20"/> 
        <arrow x1="10" y1="60" x2="60" y2="60" start="arrowA" end="arrowA" scale="5"/>
        <arrow x1="10" y1="120" x2="100" y2="120" start="none" end="arrowB" scale="5" stroke-width="3" stroke="red"/>
</draw>             
                 
figureD.svgFigure pleine page

L'élément vector est analogue au précédent, mais la longueur de la flèche et l'angle avec l'axe x sont précisés :

   
<draw name="figureE" width="200" height="100" pdf-scale="0.5" stroke="black" fill="none">
    <vector x="0" y="10" length="100" a="0" start="none" end="arrowA"/>
    <vector x="0" y="10" length="100" a="10" start="none" end="arrowA"/> 
    <vector x="0" y="10" length="100" a="20" start="none" end="arrowA"/>   
    <vector x="0" y="10" length="100" a="30" start="none" end="arrowA"/>   
</draw>                      
                  
figureE.svgFigure pleine page

Il est possible d'ajouter des légendes aux flèches. Pour cela, il faut placer un ou plusieurs éléments legend dans l'élément arrow ou dans l'élement vector :

<draw name="figureF" width="200" height="100" pdf-scale="0.5" stroke="black" fill="none">
    <arrow x1="50" y1="50" x2="150" y2="50" start="none" end="arrowA">
        <legend pos="end" a="l" fill="red">$X_1$</legend>
        <legend pos="middle" a="b" fill="blue">$X_1$</legend>
    </arrow>    
    <vector x="50" y="50" length="20" a="90" start="none" end="arrowA">
        <legend pos="end" a="b" fill="green">$Y_1$</legend>
    </vector>
</draw> 
                  
figureF.svgFigure pleine page

Pour ajouter une flèche, ou tout autre marqueur, aux extrémités d'un arc d'ellipse, il suffit d'utiliser les attributs start, end et scale :

figureF2.svgFigure pleine page

2. Marqueurs

Quelques marqueurs sont prédéfinis. Il peuvent être utilisés avec les éléments marker, arrow, vector et arc. En voici la liste :

figureG.svgFigure pleine page

Il est possible de définir des marqueurs dans un fichier externe puis de les importer avec draw-defs-import. Par exemple, voici le contenu d'un fichier mesMarqueurs.xml placé dans le répertoire source de la présente page :

            
<draw>
    <defs>
        <marker-def id="mA">
            <marker-moveto>-0.5,0</marker-moveto>
            <marker-curveto>-0.25,0.7 0.25,0.7 0.5,0</marker-curveto>
        </marker-def>
    </defs>
</draw>
            
            

Pour utiliser ce fichier :

<draw name="figureH" width="400" height="100" pdf-scale="0.5" stroke="red" fill="none">
    <draw-defs-import src="mesMarqueurs.xml"/>
    <marker x="200" y="50" src="#mA" stroke="red" scale="10" fill="red"/>
</draw>         
            
figureH.svgFigure pleine page

Il est possible de redéfinir un marqueur prédéfini, par exemple arrowA.

3. Axes

3.a. Graduations

L'élément xticks place une graduation pour un axe horizontal :

<draw name="figureI" width="400" height="100" pdf-scale="0.5" stroke="black" fill="none">
    <arrow x1="0" y1="50" x2="300" y2="50" end="#arrowB"/>
    <xtick x="100" y="50" stroke="red" fill="red">$\lambda$</xtick> 
</draw>
                
figureI.svgFigure pleine page

L'attribut optionnel marker permet de changer le marqueur utilisé et l'attribut size (valeur par défaut 10) permet de modifier sa taille.

3.b. Axe gradué

Un axe gradué est obtenu par l'élément haxis (axe horizontal) ou vaxis :

<draw name="figureJ" width="400" height="200" pdf-scale="0.5" stroke="black" fill="none">
    <translate tx="10" ty="50">
        <plotrange xmin="0" xmax="1" ymin="0" ymax="1" width="300" height="100">
            <haxis x="0,0.5,1" y="0" fill="black" font-size="small">
                <legend pos="middle" font-size="medium" font-weight="bold" 
                                            text-offset="2">axe X</legend>
                <vaxis x="0" y="0,5,10" font-size="small" fill="black">
                    <legend pos="middle" font-size="medium" font-weight="bold"
                                text-offset="2" fill="black">axe Y</legend>
                </vaxis>
                <marker x="0.5" y="5" src="#circle" scale="5" stroke="red"/>
            </haxis>
        </plotrange>  
    </translate>
</draw>  
figureJ.svgFigure pleine page

3.c. Grilles

Les éléments vlines et hlines dessinent un réseau de lignes verticales ou horizontales :

 
<draw name="figureK" width="400" height="300" pdf-scale="0.5" fill="none">
    <rect x="0" y="0" width="400" height="300" stroke="black"/>
    <vlines x="100,150,200,250,300" y1="50" y2="250" stroke="blue"/> 
    <hlines x1="50" x2="350" y="100,150,200" stroke="red"/>
</draw>             
                
figureK.svgFigure pleine page
Creative Commons LicenseTextes et figures sont mis à disposition sous contrat Creative Commons.