Etude exploratoire XML / SVG IDL_CERTU1/ETU_001 / 1.1 - Lara

Edité le 11 juin 2002 Etude exploratoire XML / SVG CERTU3.7 INTERFACE GRAPHIQUE AVEC SVG ET JAVASCRIPTUn des principaux avantages du format SVG est de permettre certaines interactions avec l’utilisateurgrâce à un langage de script. Ces opérations permettent de modifier dynamiquement la représentation DOM dudocument SVG. On peut ainsi créer, modifier ou supprimer tous les éléments graphiques du document en tempsréel. Cette partie décrit les possibilités que nous avons explorées en ce qui concerne le document SVG et sesinteractions avec Javascript.3.7.1 GénéralitésLes différents aspects illustrés dans cette partie fonctionnent bien avec le visualisateur Adobe SVGViewer et le navigateur Microsoft Internet Explorer. Nous ne pouvons pas garantir que cela sera le cas avecd’autres visualisateurs ou d’autres navigateurs qui supportent plus ou moins bien le Javascript. Les fonctionsJavascript sont appelées à partir du visualisateur lorsque l’utilisateur agit sur les objets graphiques (selon lesattributs onclick, onmouseover, etc.). Ces fonctions peuvent ensuite manipuler le modèle DOM de n’importequel objet du document. Le visualisateur interprète automatiquement les modifications et les fait apparaître àl’écran. Les possibilités sont donc théoriquement illimitées. En voici quelques exemples.3.7.2 Surlignage des contours et effets de transparence sur les zonesDans la maquette réalisée, lorsque l’utilisateur passe le curseur de la souris au-dessus d’une zone oud’un secteur, la couleur de celui-ci devient plus pâle. Lorsqu’il sélectionne une parcelle, le contour de celle-cidevient bleu. Et lorsqu’il sélectionne un type de zone ou de secteur, le contour des éléments de ce typedeviennent rouges.Pour réaliser cela, la méthode la plus évidente serait de modifier directement la transparence del’élément en question, ou la couleur et l’épaisseur de son contour. Cela serait réalisé grâce à ces quelques lignesde code par exemple :function mouseOverPoly (evt) {var poly = evt.getTarget();poly.style.setProperty('fill-opacity','0.5');}Malheureusement, cette méthode pose quelques problèmes. Puisque les zones et les secteurs sontsuperposés, le fait de rendre un secteur transparent ne change rien visuellement (on voit toujours la zone audessousqui est de la même couleur). De plus, les contours des zones se recouvrent souvent, il est donc possibleque le changement de couleur d’un contour ne soit pas ou peu visible. Pour résoudre ces problèmes, nousutilisons d’autres éléments graphiques « path » qui seront dessinés après tout le reste de la carte, dans unecouche que nous appelons couche cosmétique. En pratique, il suffit de mettre les éléments de cette couche à lafin du document SVG, car le dessin des objets se fait dans l’ordre du document. Lorsque l’on veut surligner unobjet ou son contour, il suffit de modifier l’attribut « d » de ces éléments cosmétiques pour qu’ils se superposentà l’objet, puis de les rendre visibles.Par exemple, pour rendre la couleur d’une zone ou d’un secteur plus pâle, nous utilisont un élément« path » de couleur blanche et à moitié transparent. Lorsque le curseur de la souris passe sur une zone ou unsecteur, nous superposons cet élément à l’objet en question et nous le rendons visible. Cela est réalisé grâce auxquelques lignes de code suivantes :function mouseOverPoly (evt) {var fog = document.svgMap.getSVGDocument().getElementById("fog");fog.setAttribute("d", evt.getTarget().getAttribute("d"));fog.style.setProperty('visibility', 'visible');}L’élément « fog » est défini ainsi dans le document SVG :SWORD - Nos réf. : IDL_CERTU1/ETU_001 / 1.1 Diffusion : contrôlée Page : 49/81