home *** CD-ROM | disk | FTP | other *** search
/ PC World 2005 May / PCWorld_2005-05_cd.bin / komunikace / amaya / amaya-WinXP-9.1.exe / doc / html / SVG.html.fr < prev    next >
Extensible Markup Language  |  2004-09-16  |  12KB  |  270 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 http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6.   <meta name="GENERATOR" content="amaya 8.6, see http://www.w3.org/Amaya/" />
  7.   <link href="style.css" rel="stylesheet" type="text/css" />
  8. </head>
  9.  
  10. <body xml:lang="fr" lang="fr">
  11.  
  12. <table summary="toc">
  13.   <tbody>
  14.     <tr>
  15.       <td><img alt="W3C" src="../images/w3c_home" /><img alt="Amaya"
  16.         src="../images/amaya.gif" /></td>
  17.       <td><p><a href="Math.html.fr" accesskey="p"><img alt="previous"
  18.         src="../images/left.gif" /></a> <a href="Manual.html"
  19.         accesskey="t"><img alt="top" src="../images/up.gif" /></a> <a
  20.         href="Animation.html.fr" accesskey="n"><img alt="next"
  21.         src="../images/right.gif" /></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="../images/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>
  57.     ou <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="0,16 19,0 33,16 51,6" transform="translate(4,0)"
  84.                 stroke="1" 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="0,16 13,0 26,12 43,4 44,16 15,16 12,11"
  90.                transform="translate(2,0)" stroke="1"
  91.                style="fill: #C8FF95; stroke: #000000"/>
  92.     </svg>
  93.   </li>
  94.   <li>Les courbes ouvertes et fermΘes ne sont pas encore implΘmentΘes. <svg
  95.          xmlns="http://www.w3.org/2000/svg" width="2cm" height="0.6cm">
  96.     </svg>
  97.   </li>
  98.   <li>Un fragment de HTML embarquΘ, <code>foreignObject</code> en SVG,<svg
  99.          xmlns="http://www.w3.org/2000/svg" width="6cm" height="45px">
  100.       <rect y="0" x="27px" width="110px" height="45px" style="fill: #C1FFFF"
  101.             stroke="1"/>
  102.       <foreignObject width="120px" y="0" x="20px">
  103.  
  104.         <div xmlns="http://www.w3.org/1999/xhtml">
  105.         <ul>
  106.           <li>First item</li>
  107.           <li>Second item</li>
  108.         </ul>
  109.         </div>
  110.       </foreignObject>
  111.     </svg>
  112.   </li>
  113.   <li>Un texte SVG, <code>text</code> en SVG<svg
  114.          xmlns="http://www.w3.org/2000/svg" width="9.5cm" height="1.2cm">
  115.       <text y="32px" x="14px"
  116.             style="font-family: helvetica; font-size: 14pt; fill: #FFAA00">A
  117.         simple text in SVG
  118.       </text>
  119.     </svg>
  120.   </li>
  121. </ul>
  122.  
  123. <p></p>
  124.  
  125. <p>Quand vous sΘlectionnez une forme dans la palette et que la sΘlection est
  126. dans la structure HTML du document, Amaya crΘe un nouvel ΘlΘment SVG juste au
  127. dΘbut de la sΘlection courante et la forme choisie dans ce nouvel ΘlΘment
  128. SVG. Amaya crΘe les dessins SVG comme des blocs, entre deux paragraphes. Si
  129. vous souhaitez afficher un dessin en ligne, vous devez aujourd'hui laisser
  130. Amaya le crΘer entre deux paragraphes, et Θditer le source ensuite pour le
  131. dΘplacer.</p>
  132.  
  133. <p>Quand l'ΘlΘment sΘlectionnΘ est un ΘlΘment SVG, la nouvelle forme est
  134. ajoutΘe au dessin SVG. La nouvelle forme est ajoutΘe aprΦs et peut couvrir
  135. les ΘlΘments prΘcΘdents.</p>
  136.  
  137. <p>La crΘation d'une forme nΘcessite quelques interactions directes avec
  138. l'utilisateur:</p>
  139. <ul>
  140.   <li>Pour crΘer un rectangle, vous devez tout d'abord sΘlectionner la
  141.     position du coin gauche en cliquant avec le bouton gauche de la souris.
  142.     Laissez le bouton appuyΘ et dΘplacez la souris jusqu'α la position du
  143.     coin opposΘ, puis lΓchez le bouton. La forme est maintenant dΘfinie.</li>
  144.   <li>Pour crΘer un cercle ou une ellipse, vous devez tout d'abord
  145.     sΘlectionner la position du centre en cliquant avec le bouton gauche de
  146.     la souris. Laissez le bouton appuyΘ et dΘplacez la souris vers la droite
  147.     et/ou vers le bas, puis lΓchez le bouton. La forme est maintenant
  148.   dΘfinie.</li>
  149.   <li>Pour une polyligne ou un polygone, entrez chaque point en cliquant la
  150.     position correspondante avec le bouton gauche de la souris. Pour indiquer
  151.     le dernier point, cliquez avec le bouton du milieu.</li>
  152. </ul>
  153.  
  154. <p>Vous pouvez insΘrer une image dans un graphique. Choisissez l'entrΘe
  155. <strong>Image</strong> du menu <strong>XHTML</strong> ou cliquez sur le
  156. bouton <img alt="Image " src="../images/Image.gif" longdesc="longdesc.htm" />
  157. de la barre de boutons, puis procΘdez <a
  158. href="ImageMaps.html.fr#Adding">comme dans une page HTML</a>.</p>
  159.  
  160. <p>Pour insΘrer des expressions mathΘmatiques dans un dessin SVG, vous devez
  161. juste cliquer dans la palette Math alors que la sΘlection est dans le dessin
  162. SVG. Amaya engendrera un foreingObject pour embarquer les balises MathML.</p>
  163.  
  164. <h3><a name="L292">DΘplacer les graphiques</a></h3>
  165. <ul>
  166.   <li>Par manipulation directe - en combinant la <strong>touche
  167.     Control</strong> et le <strong>bouton gauche</strong> de la souris dans
  168.     la forme, vous pourrez dΘplacer cette forme.</li>
  169.   <li>En Θditant les attributs.</li>
  170. </ul>
  171.  
  172. <h3><a name="Retailler">Retailler les graphiques</a></h3>
  173. <ul>
  174.   <li>Par manipulation directe - en combinant la <strong>touche
  175.     Control</strong> et le <strong>bouton du milieu</strong> ou le
  176.     <strong>bouton droit</strong> de la souris α l'intΘrieur de la forme,
  177.     vous pourrez redimensionner cette forme.</li>
  178.   <li>En Θditant les attributs.</li>
  179. </ul>
  180.  
  181. <h3><a name="Peindre">Peindre les graphiques</a></h3>
  182.  
  183. <p>Avec Amaya, vous pouvez peindre (c.a.d., remplir ou tracer le contour) des
  184. ΘlΘments SVG avec une couleur simple. La couleur de remplissage par dΘfaut
  185. est <code>black</code>, et le contour est par dΘfaut
  186. <code>transparent</code>. Mais vous pouvez changer ces valeurs :</p>
  187. <ul type="square">
  188.   <li>Soit en Θditant les attributs SVG <code>fill</code> et
  189.     <code>stroke</code> (<span style="color: #E55500">exemple,</span><span
  190.     style="color: #E55500">fill=" #C8FF95" stroke=" #000000"</span>),</li>
  191.   <li>Soit en Θditant l'attribut SVG <code>style</code> avec les propriΘtΘs
  192.     <code>fill</code> et <code>stroke</code> (<span
  193.     style="color: #E55500">exemple, style="fill: #C8FF95; stroke:
  194.     #000000"</span>)</li>
  195. </ul>
  196.  
  197. <p>La palette affichΘe par l'entrΘe de menu <strong>Style/Couleurs</strong>
  198. vous permet d'engendrer l'attribut SVG <code>style</code>. Dans la palette
  199. Amaya, un clic avec le bouton gauche de la souris engendre la propriΘtΘ
  200. stroke et un clic avec le bouton du milieu ou droit de la souris engendre la
  201. propriΘtΘ fill.</p>
  202.  
  203. <p>Un ΘlΘment <code>text</code> SVG est considΘrΘ comme une forme graphique,
  204. donc la propriΘtΘ <code>fill</code> peint l'intΘrieur du caractΦre et la
  205. propriΘtΘ <code>stroke</code> peint le bord du caractΦre. Amaya applique la
  206. propriΘtΘ fill aux caractΦres, mais pas la propriΘtΘ stroke. Ceci explique
  207. que'un clic avec le bouton gauche de la souris n'a pas d'effet immΘdiat et un
  208. clic avec le bouton du milieu ou droit de la souris peint l'ΘlΘment
  209. <code>text</code>.</p>
  210.  
  211. <div id="page_body">
  212. <h2>Gestion de librairies graphiques SVG</h2>
  213. <ul>
  214.   <li>Utilisation d'une librairie d'objets graphiques SVG
  215.     <p><img alt="Use SVG library" src="../images/scenario_graphique.png"
  216.     /></p>
  217.     <p>Pour coller un ΘlΘment graphique d'une librairie SVG dans un document,
  218.     vous devez:</p>
  219.     <ol>
  220.       <li>DΘplacer le curseur d'insertion α l'endroit o∙ vous dΘsirez insΘrer
  221.         cet ΘlΘment.</li>
  222.       <li>Cliquer sur le bouton <strong>Librairie</strong> . Le bouton
  223.         <strong>Librairie</strong> (<img alt="SVG Library button"
  224.         src="../images/SVGLibrary.gif" />) affiche la librairie graphique
  225.         standard.</li>
  226.       <li>Choisir un ΘlΘment graphique en cliquant sur sa reprΘsentation
  227.         graphique.</li>
  228.       <li>SΘlectionner le mode de "copie": vous pouvez choisir de copier ou
  229.         de rΘfΘrencer l'ΘlΘment graphique.
  230.         <ul>
  231.           <li>En mode "Copie", vous Θditez la dΘfinition SVG explicite de
  232.             l'ΘlΘment graphique.</li>
  233.           <li>En mode "RΘfΘrence", vous Θditez un ΘlΘment <use>
  234.             rΘfΘrenτant la dΘfinition explicite de l'ΘlΘment. ( <a
  235.             href="http://www.w3.org/TR/SVG/struct.html#UseElement">Regarder
  236.             la spΘcification SVG</a>)</li>
  237.         </ul>
  238.       </li>
  239.     </ol>
  240.   </li>
  241.   <li>Ajouter un nouvel objet graphique α une librairie
  242.     <p><img alt="Add new model in a library"
  243.     src="../images/enrichissement_lib.png" /></p>
  244.   </li>
  245. </ul>
  246. </div>
  247.  
  248. <p>Pour ajouter des ΘlΘments SVG α une librairie, vous devez :</p>
  249. <ol>
  250.   <li>SΘlectionner des ΘlΘments SVG dans un document.</li>
  251.   <li>Presser les touches <code>Control</code> key "l" <code>Control</code>
  252.     key "a" ("l" comme librairie "a" comme ajout) ou utiliser le menu pour
  253.     ouvrir le dialogue d'ajout.</li>
  254.   <li>SΘlectionner un titre de librairie dans lequel vous souhaitez ajouter
  255.     la sΘlection.</li>
  256.   <li>Confirmer ou choisir de crΘer une nouvelle librairie dans laquelle vous
  257.     souhaitez ajouter la sΘlection.</li>
  258. </ol>
  259.  
  260. <p></p>
  261. </div>
  262.  
  263. <p><a href="Math.html.fr"><img alt="previous" src="../images/left.gif"
  264. /></a><a href="Manual.html"><img alt="top" src="../images/up.gif" /></a><a
  265. href="Xml.html.fr#page_body"><img alt="next" src="../images/right.gif"
  266. /></a></p>
  267. <hr />
  268. </body>
  269. </html>
  270.