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