Création d'une carte paramétrable depuis Corel Draw 9

CorelDraw 9: Crιation de plans  Dissociation  Changement de plan  Vιrifier  Enregistrer
Le fichier SVG  Le fichier HTML d'appel  Visualisation

Supposons la carte récupérée dans un clipart ou autre ….
Il faut classer les objets que l'on voudra montrer ou cacher dans des plans différents

Nous utilisons le gestionnaire d'objets:

Nous créons les plans nécessaires avec l'icône de gauche et leur donnons un nom explicite: villes, routes, …..

 
Le menu contextuel de l'image permet de la dissocier pour pouvoir changer de plans les objets
Un objet est accessible aussi bien dans le gestionnaire d'objets que directement en cliquant sur lui

Pour changer un objet de plan, dans le gestionnaire, cliquer sur l'objet et bouton gauche appuyé, le poser sur le plan voulu. Ici l'objet "texte artistique" est mis dans routes

 

.Quand un plan est complet, nous pouvons l'associer et tous ses objets sont groupés.            Haut de Page

Pour vérifier la bonne organisation, nous pouvons afficher ou cacher les plans avec l'icône en forme d'œil. Ici ne sont affichées que les routes et le fond de carte.

Attention à l'ordre des plans, éventuellement à redéfinir en les déplaçant dans le gestionnaire, le premier de la liste sera au premier plan …                                                                                                    Haut de Page

Il nous reste à enregistrer la carte au format SVG, ce qui est possible après installation du complément à Corel Draw 9

Pour les options choisir d'exporter les textes comme texte et d'incorporer les feuilles de style dynamiques dans le fichier ( CSS data embedded in internal style sheet )                                                        Haut de Page

Le fichier SVG et la gestion des actions par formulaire

Le fichier SVG est un fichier texte ( Attention, pour le modifier utilisez le bloc-notes ou WordPad )

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN" "http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
<!-- Creator: CorelDRAW -->
<svg xml:space="preserve" width="6.34498in" height="6.03265in" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality" viewBox="-3185 0 6345 6033">
<defs>                                                                                                                             Définition des styles
<style type="text/css">
<![CDATA[
.str0 {stroke:#131516;stroke-width:3;stroke-linejoin:round}                                             Style de ligne
.fil3 {fill:none}                                                                                                                         Style de remplissage
.fnt2 {font-weight:normal;font-size:63;font-family:'Arial Black'}                                     Style de texte
]]>
</style> </defs>
<g id="fond">                                                         Le plan "fond" dernier de notre liste est dessiné en premier
<path class="fil0 str0" d="M-2402 2500c-38,-112 158,106 35,50 -43,-19 -33,-21 -35,-50z"/>
………………………..
<g id="villes">                                                                                 Le plan "villes" ( noms des villes )
<g transform="matrix(0.927835 0 0 1 -1802.08 1589.5)">
<text x="0" y="3248" class="fil27 fnt0">Bayonne</text>
……………………………….
</svg>                                                                                                                                                                            Haut de Page

Le fichier HTML servira à l'affichage de la carte et un formulaire permet de choisir les objets à afficher

<BODY>
<CENTER><P><EMBED height=500 name=carte src=france.svg width=500></CENTER> Fichier SVG comme plug in
<SCRIPT language=JavaScript1.2>                 Fonction Javascript pour montrer ou cacher un plan
function montre_cache (checkbox, nom_couche)         Paramètres: case cochée ou non et nom du plan concerné
{ var svgobj,svgstyle;
var svgdoc = document.carte.getSVGDocument();
svgobj = svgdoc.getElementById(nom_couche);             Définition du plan correspondant dans le fichier SVG
svgstyle = svgobj.getStyle();
if (!checkbox.checked)                                                                     Si la case n'est pas cochée
{svgstyle.setProperty('visibility', 'hidden');}                                                 Plan caché
else
{svgstyle.setProperty('visibility', 'visible');}}                                                 Plan montré
</SCRIPT>
<FORM name=choix>                             Formulaire avec tableau
<CENTER>
<TABLE border=0 cellPadding=0 cellSpacing=2 width=400>
<TBODY>
<TD><INPUT onclick="montre_cache(this,'regions')" type=checkbox>Noms des régions</TD>
…………………………………                Quand on clique sur la case, appel de la fonction
<SCRIPT>                     Fonction javascript pour cocher toutes les cases au chargement
for (var i = 0; i < document.choix.length; i++)
if (document.choix.elements[i].type == 'checkbox')
document.choix.elements[i].checked = true;
</SCRIPT>

Visualisation:                                                                                                                Haut de Page

Il faut un plug in SVG, par exemple celui d'Adobe. En connexion avec Netscape, il faut que le provider ait déclaré sur le serveur le type mime des fichiers SVG (image/svg-xml).

Sur le dessin vectoriel, un menu contextuel permet de faire des zooms, sauver le fichier, ….
Avec la touche ALT, on peut faire défiler le dessin agrandi à la souris
L'impression se fait en vectoriel.                                                                                            Haut de Page