<?xml version="1.0" encoding="iso-8859-1"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Edition des graphiques</title>
  <meta name="GENERATOR" content="amaya V4.01" />
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body xml:lang="fr" lang="fr">

<table width="100%" summary="toc">
  <tbody>
    <tr>
      <td><img border="0" alt="W3C" src="../../Icons/WWW/w3c_home" /><img
        border="0" alt="Amaya" src="../Icons/amaya.gif" /></td>
      <td><p align="right"><a href="Math.html.fr"><img alt="previous"
        border="0" src="../Icons/left.gif" /></a><a href="Manual.html"><img
        alt="top" border="0" src="../Icons/up.gif" /></a><a
        href="ImageMaps.html.fr"><img alt="next" border="0"
        src="../Icons/right.gif" /></a></p>
      </td>
    </tr>
  </tbody>
</table>

<div>
<h2>Edition des graphiques</h2>

<p>Amaya vous permet d'inclure des graphiques vectoriels dans des pages Web,
suivant la spécification Scalable Vector Graphics (<a
href="http://www.w3.org/TR/svg/">SVG</a>). Les éléments SVG sont gérés comme
des composants structurés, de la même façon que les éléments HTML. Donc vous
pouvez manipuler les graphiques SVG comme n'importe quelle autre partie des
documents HTML. Toutes les fonctions d'édition fournies par Amaya pour éditer
le texte sont aussi disponibles pour éditer le graphique. Il y a aussi
quelques fonctions de contrôle supplémentaires pour créer des éléments
SVG.</p>

<h2>Création de graphiques avec la palette</h2>

<p>Pour créer un nouvel élément SVG dans un document, vous devez juste placer
le point d'insertion (caret) à la position où vous voulez l'insérer, et
cliquer le bouton <strong>Graphique</strong> <img src="../Icons/Graph.gif"
alt="Graph" />. Le bouton Graphique affiche une palette qui reste sur l'écran
tant que vous n'avez pas cliqué sur le bouton <code>Terminer</code>.
Choisissez juste l'élément que vous désirez créer. Les graphiques disponibles
sont :</p>
<ul>
  <li>Une ligne, <code>line</code> en SVG, <svg
    xmlns="http://www.w3.org/2000/svg" width="2cm" height="0.6cm">
      <line y1="3px" x1="0px" x2="17px" y2="20px" style="stroke: #B20000"/>
    </svg>
  </li>
  <li>Un rectangle, <code>rect</code> en SVG sans attributs <code>rx</code> ou
    <code>ry</code>, <svg xmlns="http://www.w3.org/2000/svg" width="2cm"
    height="0.6cm">
      <rect x="6px" width="22px" height="18px"
            style="fill: #FFCB69; stroke: #0071FF"/>
    </svg>
  </li>
  <li>Un rectangle avec des angles arrondis, <code>rect</code> en SVG, <svg
    xmlns="http://www.w3.org/2000/svg" width="2cm" height="0.6cm">
      <rect rx="6px" width="23px" height="18px"
            style="fill: #E5E500; stroke: #4C00E5"/>
    </svg>
  </li>
  <li>Un cercle, <code>circle</code> en SVG, <svg
    xmlns="http://www.w3.org/2000/svg" width="2cm" height="0.6cm">
      <circle cy="10px" cx="12px" r="10px" style="fill: #C1FFE9"/>
    </svg>
  </li>
  <li>Une ellipse, <code>ellipse</code> en SVG, <svg
    xmlns="http://www.w3.org/2000/svg" width="2cm" height="0.6cm">
      <ellipse cy="10px" cx="20px" rx="15px" ry="10px" style="fill: #B795FF"/>
    </svg>
  </li>
  <li>Une polyligne, <code>polyline</code> en SVG,<svg
    xmlns="http://www.w3.org/2000/svg" width="2cm" height="0.6cm">
      <polyline points="4,16 23,0 37,16 55,6" style="stroke: #0000B2"/>
    </svg>
  </li>
  <li>Un polygone, <code>polygon</code> en SVG, <svg
    xmlns="http://www.w3.org/2000/svg" width="2cm" height="0.7cm">
      <polygon points="2,16 15,0 28,12 45,4 46,16 17,16 14,11"
               style="fill: #C8FF95; stroke: #000000"/>
    </svg>
  </li>
  <li>Les courbes ouvertes et fermées ne sont pas encore implémentées. <svg
    xmlns="http://www.w3.org/2000/svg" width="2cm" height="0.6cm">
    </svg>
  </li>
  <li>Un fragment de HTML embarqué, <code>foreignObject</code> en SVG,<svg
    xmlns="http://www.w3.org/2000/svg" width="6cm" height="45px">
      <rect y="0" x="27px" width="110px" height="45px" style="fill: #C1FFFF"/>
      <foreignObject width="120px" y="0" x="20px">

        <div xmlns="http://www.w3.org/1999/xhtml">
        <ul>
          <li>First item</li>
          <li>Second item</li>
        </ul>
        </div>
      </foreignObject>
    </svg>
  </li>
  <li>Un texte SVG, <code>text</code> en SVG<svg
    xmlns="http://www.w3.org/2000/svg" width="9.5cm" height="1.2cm">
      <text y="32px" x="14px"
      style="font-family: helvetica; font-size: 14pt; fill: #FFAA00">A simple
        text in SVG
      </text>
    </svg>
  </li>
</ul>

<p></p>

<p>Quand vous sélectionnez une forme dans la palette et que la sélection est
dans la structure HTMLdu document, Amaya crée un nouvel élément SVG juste au
début de la sélection courante et la forme choisie dans ce nouvel élément SVG.
Amaya crée les dessins SVG comme des blocs, entre deux paragraphes. Si vous
souhaitez afficher un dessin en ligne, vous devez aujourd'hui laisser Amaya le
créer entre deux paragraphes, et éditer le source ensuite pour le
déplacer.</p>

<p>Quand l'élément sélectionné est un élément SVG, la nouvelle forme est
ajoutée au dessin SVG. La nouvelle forme est ajoutée après et peut couvrir les
éléments précédents.</p>

<p>La création d'une forme nécessite quelques interactions directes avec
l'utilisateur:</p>
<ul>
  <li>Pour créer un rectangle, vous devez tout d'abord sélectionner la
    position du coin gauche en cliquant avec le bouton gauche de la souris.
    Laissez le bouton appuyé et déplacez la souris jusqu'à la position du coin
    opposé, puis lâchez le bouton. La forme est maintenant définie.</li>
  <li>Pour créer un cercle ou une ellipse, vous devez tout d'abord
    sélectionner la position du centre en cliquant avec le bouton gauche de la
    souris. Laissez le bouton appuyé et déplacez la souris vers la droite
    et/ou vers le bas, puis lâchez le bouton. La forme est maintenant
  définie.</li>
  <li>Pour une polyligne ou un polygone, entrez chaque point en cliquant la
    position correspondante avec le bouton gauche de la souris. Pour indiquer
    le dernier point, cliquez avec le bouton du milieu.</li>
</ul>

<p>Pour insérer des expressions mathématiques dans un dessin SVG, vous devez
juste cliquer dans la palette Math alors que la sélection est dans le dessin
SVG. Amaya engendrera un foreingObject pour embarquer les balises MathML.</p>

<h2>Déplacer les graphiques</h2>
<ul>
  <li>Par manipulation directe - en combinant la <strong>touche
    Control</strong> et le <strong>bouton gauche</strong> de la souris dans la
    forme, vous pourrez déplacer cette forme.</li>
  <li>En éditant les attributs.</li>
</ul>

<h2>Retailler les graphiques</h2>
<ul>
  <li>Par manipulation directe - en combinant la <strong>touche
    Control</strong> et le <strong>bouton du milieu</strong> ou le
    <strong>bouton droit</strong> de la souris à l'intérieur de la forme, vous
    pourrez redimensionner cette forme.</li>
  <li>En éditant les attributs. </li>
</ul>

<h2>Peindre les graphiques</h2>

<p>Avec Amaya, vous pouvez peindre (c.a.d., remplir ou tracer le contour) des
éléments SVG avec une couleur simple. La couleur de remplissage par défaut est
<code>black</code>, et le contour est par défaut <code>transparent</code>.
Mais vous pouvez changer ces valeurs :</p>
<ul type="square">
  <li>Soit en éditant les attributs SVG <code>fill</code> et
    <code>stroke</code> (<span style="color: #E55500">exemple, </span><span
    style="color: #E55500">fill=" #C8FF95" stroke=" #000000"</span>),</li>
  <li>Soit en éditant l'attribut SVG <code>style</code> avec les propriétés
    <code>fill</code> et <code>stroke</code> (<span
    style="color: #E55500">exemple, style="fill: #C8FF95; stroke:
    #000000"</span>)</li>
</ul>

<p>La palette affichée par l'entrée de menu <strong>Style/Couleurs</strong>
vous permet d'engendrer l'attribut SVG <code>style</code>. Dans la palette
Amaya, un clic avec le bouton gauche de la souris engendre la propriété stroke
et un clic avec le bouton du milieu ou droit de la souris engendre la
propriété fill.</p>

<p>Un élément <code>text</code> SVG est considéré comme une forme graphique,
donc la propriété <code>fill</code> peint l'intérieur du caractère et la
propriété <code>stroke</code> peint le bord du caractère. Amaya applique la
propriété fill aux caractères, mais pas la propriété stroke. Ceci explique
que'un clic avec le bouton gauche de la souris n'a pas d'effet immédiat et un
clic avec le bouton du milieu ou droit de la souris peint l'élément
<code>text</code>.</p>

<p></p>
</div>

<p align="right"><a href="Math.html.fr"><img alt="previous" border="0"
src="../Icons/left.gif" /></a><a href="Manual.html"><img alt="top" border="0"
src="../Icons/up.gif" /></a><a href="ImageMaps.html.fr"><img alt="next"
border="0" src="../Icons/right.gif" /></a></p>
<hr />
</body>
</html>
