home *** CD-ROM | disk | FTP | other *** search
/ PC World 2002 September / PCWorld_2002-09_cd.bin / Komunik / amaya / 9x / amaya-Win98-6.2.exe / _SETUP.1 / SVG.html.fr < prev    next >
Encoding:
Extensible Markup Language  |  2002-06-11  |  9.4 KB  |  219 lines
  1. <?xml version="1.0" encoding="iso-8859-1"?>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.   <title>Edition des graphiques</title>
  5.   <meta name="GENERATOR" content="amaya 5.4, see http://www.w3.org/Amaya/" />
  6.   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  7. </head>
  8.  
  9. <body xml:lang="fr" lang="fr">
  10.  
  11. <table summary="toc">
  12.   <tbody>
  13.     <tr>
  14.       <td><img alt="W3C" src="../images/w3c_home" /><img alt="Amaya"
  15.         src="../images/amaya.gif" /></td>
  16.       <td><p><a href="Math.html.fr" accesskey="p"><img alt="previous"
  17.         src="../images/left.gif" /></a> <a href="Manual.html"
  18.         accesskey="t"><img alt="top" src="../images/up.gif" /></a> <a
  19.         href="Xml.html.fr#page_body" accesskey="n"><img alt="next"
  20.         src="../images/right.gif" /></a></p>
  21.       </td>
  22.     </tr>
  23.   </tbody>
  24. </table>
  25.  
  26. <div id="Edition">
  27. <h2>Edition des graphiques</h2>
  28.  
  29. <p>Amaya vous permet d'inclure des graphiques vectoriels dans des pages Web,
  30. suivant la spΘcification Scalable Vector Graphics (<a
  31. href="http://www.w3.org/TR/svg/">SVG</a>). Les ΘlΘments SVG sont gΘrΘs comme
  32. des composants structurΘs, de la mΩme faτon que les ΘlΘments HTML. Donc vous
  33. pouvez manipuler les graphiques SVG comme n'importe quelle autre partie des
  34. documents HTML. Toutes les fonctions d'Θdition fournies par Amaya pour Θditer
  35. le texte sont aussi disponibles pour Θditer le graphique. Il y a aussi
  36. quelques fonctions de contr⌠le supplΘmentaires pour crΘer des ΘlΘments
  37. SVG.</p>
  38.  
  39. <h3><a name="L288">CrΘation de graphiques avec la palette</a></h3>
  40.  
  41. <p>Pour crΘer un nouvel ΘlΘment SVG dans un document, vous devez juste placer
  42. le point d'insertion (caret) α la position o∙ vous voulez l'insΘrer, et
  43. cliquer le bouton <strong>Graphique</strong> <img src="../images/Graph.gif"
  44. alt="Graph" />. Le bouton Graphique affiche une palette qui reste sur l'Θcran
  45. tant que vous n'avez pas cliquΘ sur le bouton <code>Terminer</code>.
  46. Choisissez juste l'ΘlΘment que vous dΘsirez crΘer. Les graphiques disponibles
  47. sont :</p>
  48. <ul>
  49.   <li>Une ligne, <code>line</code> en SVG, <svg
  50.     xmlns="http://www.w3.org/2000/svg" width="2cm" height="0.6cm">
  51.       <line y1="3px" x1="0px" x2="17px" y2="20px" style="stroke: #B20000"
  52.             stroke="1"/>
  53.     </svg>
  54.   </li>
  55.   <li>Un rectangle, <code>rect</code> en SVG sans attributs <code>rx</code>
  56.     ou <code>ry</code>, <svg xmlns="http://www.w3.org/2000/svg" width="2cm"
  57.     height="0.6cm">
  58.       <rect x="6px" width="22px" height="18px"
  59.             style="fill: #FFCB69; stroke: #0071FF" stroke="1"/>
  60.     </svg>
  61.   </li>
  62.   <li>Un rectangle avec des angles arrondis, <code>rect</code> en SVG, <svg
  63.     xmlns="http://www.w3.org/2000/svg" width="2cm" height="0.6cm">
  64.       <rect rx="6px" stroke="1" width="23px" height="18px"
  65.             style="fill: #E5E500; stroke: #4C00E5"/>
  66.     </svg>
  67.   </li>
  68.   <li>Un cercle, <code>circle</code> en SVG, <svg
  69.     xmlns="http://www.w3.org/2000/svg" width="2cm" height="0.6cm">
  70.       <circle cy="10px" cx="12px" r="10px" style="fill: #C1FFE9; stroke: red"
  71.               stroke="1"/>
  72.     </svg>
  73.   </li>
  74.   <li>Une ellipse, <code>ellipse</code> en SVG, <svg
  75.     xmlns="http://www.w3.org/2000/svg" width="2cm" height="0.6cm">
  76.       <ellipse cy="10px" cx="20px" rx="15px" ry="10px" style="fill: #B795FF"
  77.             stroke="1"/>
  78.     </svg>
  79.   </li>
  80.   <li>Une polyligne, <code>polyline</code> en SVG,<svg
  81.     xmlns="http://www.w3.org/2000/svg" width="2cm" height="0.6cm">
  82.       <polyline points="4,16 23,0 37,16 55,6" stroke="1"
  83.                 style="stroke: #0000B2; fill: #FFBC95"/>
  84.     </svg>
  85.   </li>
  86.   <li>Un polygone, <code>polygon</code> en SVG, <svg
  87.     xmlns="http://www.w3.org/2000/svg" width="2cm" height="0.7cm">
  88.       <polygon points="2,16 15,0 28,12 45,4 46,16 17,16 14,11" stroke="1"
  89.                style="fill: #C8FF95; stroke: #000000"/>
  90.     </svg>
  91.   </li>
  92.   <li>Les courbes ouvertes et fermΘes ne sont pas encore implΘmentΘes. <svg
  93.     xmlns="http://www.w3.org/2000/svg" width="2cm" height="0.6cm">
  94.     </svg>
  95.   </li>
  96.   <li>Un fragment de HTML embarquΘ, <code>foreignObject</code> en SVG,<svg
  97.     xmlns="http://www.w3.org/2000/svg" width="6cm" height="45px">
  98.       <rect y="0" x="27px" width="110px" height="45px" style="fill: #C1FFFF"
  99.             stroke="1"/>
  100.       <foreignObject width="120px" y="0" x="20px">
  101.  
  102.         <div xmlns="http://www.w3.org/1999/xhtml">
  103.         <ul>
  104.           <li>First item</li>
  105.           <li>Second item</li>
  106.         </ul>
  107.         </div>
  108.       </foreignObject>
  109.     </svg>
  110.   </li>
  111.   <li>Un texte SVG, <code>text</code> en SVG<svg
  112.     xmlns="http://www.w3.org/2000/svg" width="9.5cm" height="1.2cm">
  113.       <text y="32px" x="14px"
  114.             style="font-family: helvetica; font-size: 14pt; fill: #FFAA00">A
  115.         simple text in SVG
  116.       </text>
  117.     </svg>
  118.   </li>
  119. </ul>
  120.  
  121. <p></p>
  122.  
  123. <p>Quand vous sΘlectionnez une forme dans la palette et que la sΘlection est
  124. dans la structure HTMLdu document, Amaya crΘe un nouvel ΘlΘment SVG juste au
  125. dΘbut de la sΘlection courante et la forme choisie dans ce nouvel ΘlΘment
  126. SVG. Amaya crΘe les dessins SVG comme des blocs, entre deux paragraphes. Si
  127. vous souhaitez afficher un dessin en ligne, vous devez aujourd'hui laisser
  128. Amaya le crΘer entre deux paragraphes, et Θditer le source ensuite pour le
  129. dΘplacer.</p>
  130.  
  131. <p>Quand l'ΘlΘment sΘlectionnΘ est un ΘlΘment SVG, la nouvelle forme est
  132. ajoutΘe au dessin SVG. La nouvelle forme est ajoutΘe aprΦs et peut couvrir
  133. les ΘlΘments prΘcΘdents.</p>
  134.  
  135. <p>La crΘation d'une forme nΘcessite quelques interactions directes avec
  136. l'utilisateur:</p>
  137. <ul>
  138.   <li>Pour crΘer un rectangle, vous devez tout d'abord sΘlectionner la
  139.     position du coin gauche en cliquant avec le bouton gauche de la souris.
  140.     Laissez le bouton appuyΘ et dΘplacez la souris jusqu'α la position du
  141.     coin opposΘ, puis lΓchez le bouton. La forme est maintenant dΘfinie.</li>
  142.   <li>Pour crΘer un cercle ou une ellipse, vous devez tout d'abord
  143.     sΘlectionner la position du centre en cliquant avec le bouton gauche de
  144.     la souris. Laissez le bouton appuyΘ et dΘplacez la souris vers la droite
  145.     et/ou vers le bas, puis lΓchez le bouton. La forme est maintenant
  146.   dΘfinie.</li>
  147.   <li>Pour une polyligne ou un polygone, entrez chaque point en cliquant la
  148.     position correspondante avec le bouton gauche de la souris. Pour indiquer
  149.     le dernier point, cliquez avec le bouton du milieu.</li>
  150. </ul>
  151.  
  152. <p>Vous pouvez insΘrer une image dans un graphique. Choisissez l'entrΘe
  153. <strong>Image</strong> du menu <strong>╔lΘments</strong> ou cliquez sur le
  154. bouton <img alt="Image " src="../images/Image.gif" longdesc="longdesc.htm" />
  155. de la barre de boutons, puis procΘdez <a
  156. href="ImageMaps.html.fr#Adding">comme dans une page HTML</a>.</p>
  157.  
  158. <p>Pour insΘrer des expressions mathΘmatiques dans un dessin SVG, vous devez
  159. juste cliquer dans la palette Math alors que la sΘlection est dans le dessin
  160. SVG. Amaya engendrera un foreingObject pour embarquer les balises MathML.</p>
  161.  
  162. <h3><a name="L292">DΘplacer les graphiques</a></h3>
  163. <ul>
  164.   <li>Par manipulation directe - en combinant la <strong>touche
  165.     Control</strong> et le <strong>bouton gauche</strong> de la souris dans
  166.     la forme, vous pourrez dΘplacer cette forme.</li>
  167.   <li>En Θditant les attributs.</li>
  168. </ul>
  169.  
  170. <h3><a name="Retailler">Retailler les graphiques</a></h3>
  171. <ul>
  172.   <li>Par manipulation directe - en combinant la <strong>touche
  173.     Control</strong> et le <strong>bouton du milieu</strong> ou le
  174.     <strong>bouton droit</strong> de la souris α l'intΘrieur de la forme,
  175.     vous pourrez redimensionner cette forme.</li>
  176.   <li>En Θditant les attributs.</li>
  177. </ul>
  178.  
  179. <h3><a name="Peindre">Peindre les graphiques</a></h3>
  180.  
  181. <p>Avec Amaya, vous pouvez peindre (c.a.d., remplir ou tracer le contour) des
  182. ΘlΘments SVG avec une couleur simple. La couleur de remplissage par dΘfaut
  183. est <code>black</code>, et le contour est par dΘfaut
  184. <code>transparent</code>. Mais vous pouvez changer ces valeurs :</p>
  185. <ul type="square">
  186.   <li>Soit en Θditant les attributs SVG <code>fill</code> et
  187.     <code>stroke</code> (<span style="color: #E55500">exemple,</span><span
  188.     style="color: #E55500">fill=" #C8FF95" stroke=" #000000"</span>),</li>
  189.   <li>Soit en Θditant l'attribut SVG <code>style</code> avec les propriΘtΘs
  190.     <code>fill</code> et <code>stroke</code> (<span
  191.     style="color: #E55500">exemple, style="fill: #C8FF95; stroke:
  192.     #000000"</span>)</li>
  193. </ul>
  194.  
  195. <p>La palette affichΘe par l'entrΘe de menu <strong>Style/Couleurs</strong>
  196. vous permet d'engendrer l'attribut SVG <code>style</code>. Dans la palette
  197. Amaya, un clic avec le bouton gauche de la souris engendre la propriΘtΘ
  198. stroke et un clic avec le bouton du milieu ou droit de la souris engendre la
  199. propriΘtΘ fill.</p>
  200.  
  201. <p>Un ΘlΘment <code>text</code> SVG est considΘrΘ comme une forme graphique,
  202. donc la propriΘtΘ <code>fill</code> peint l'intΘrieur du caractΦre et la
  203. propriΘtΘ <code>stroke</code> peint le bord du caractΦre. Amaya applique la
  204. propriΘtΘ fill aux caractΦres, mais pas la propriΘtΘ stroke. Ceci explique
  205. que'un clic avec le bouton gauche de la souris n'a pas d'effet immΘdiat et un
  206. clic avec le bouton du milieu ou droit de la souris peint l'ΘlΘment
  207. <code>text</code>.</p>
  208.  
  209. <p></p>
  210. </div>
  211.  
  212. <p><a href="Math.html.fr"><img alt="previous" src="../images/left.gif"
  213. /></a><a href="Manual.html"><img alt="top" src="../images/up.gif" /></a><a
  214. href="Xml.html.fr#page_body"><img alt="next" src="../images/right.gif"
  215. /></a></p>
  216. <hr />
  217. </body>
  218. </html>
  219.