Comment établir des coordonnées spatiales ?

Bonjour à vous tous,

Je voudrais savoir si l'un de vous saurait m'expliquer comment MDN à su établir les coordonnées spatiales indiquées dans l'exemple du lien MDN ci-dessous (chiffres dans l'attribut "cords" de la balise <area>). Est-ce que MDN a utilisé un logiciel qui établit les coordonnées, en dessinant à la souris à la façon d'Illustrator, ou alors c'est établit de tête ? Voici le lien en question https://developer.mozilla.org/fr/docs/Web/HTML/Element/area

Que le code soit avec vous,
Amicalement

Salut,

Je ne suis pas sur d'avoir bien saisi la question. Je peux dessiner une ou plusieurs formes sur Illustrator et enregistrer en svg ce qui me donnera les coordonnées dans un référentiel (le plan de travail / artboard) utilisable directement dans le web. Alors le code est parfois un peu étrange, il faut comprendre ce qui est généré, pourquoi et ce dont on peut se passer mais je l'utilise souvent oui.

Par exemple voila ce que contient le fichier svg d'un triangle fait dans illustrator sur un artboard carré de 100px quand je l'ouvre avec visual code :

<?xml version="1.0" encoding="UTF-8"?><svg id="Calque_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><style>.cls-1{fill:#fff;}</style></defs><polygon class="cls-1" points="18.03 77.5 49.5 23 80.97 77.5 18.03 77.5"/><path d="m49.5,24l15.3,26.5,15.3,26.5H18.9l15.3-26.5,15.3-26.5m0-2l-16.17,28-16.17,28h64.66l-16.17-28-16.17-28h0Z"/></svg>

Utilisable direct dans un html (mais peut etre nettoyé/adapté un peu) :
https://jsfiddle.net/d7msctLa/

N'importe quel logiciel qui gère le vectoriel et l'enregistrement en svg le fera

Bonne soirée !

@_laurent: c'est ce dont je parlais dans mon postscriptum. Un object en vecteur, ça n'est pas intéressant de faire un map area. Autant utiliser les <a> dans cet objet.

En effet, n'importe quel logiciel vectoriel peut faire l'affaire. Mais attention aux attributs/valeurs en plus lors de l'export. Depuis des années, j'utilise Inkscape. Lors de l'export en svg, tu récupères des attr/val qu'il faut nettoyer. Illustrator est vraiment un très bon soft. Illustrator est intéressant si tu fais du print. Pour le web, la licence est chère pour ce que c'est de nos jours.

_laurent a écrit :
Bonne soirée !

Tu prends ton après midi ?
Modifié par niuxe (27 Jan 2023 - 16:45)

niuxe a écrit :
@_laurent: c'est ce dont je parlais dans mon postscriptum. Un object en vecteur, ça n'est pas intéressant de faire un map area. Autant utiliser les &lt;a&gt; dans cet objet.

Aaaaaah ca y est je raccroche les wagon, les map area etc... oui totalement, la dernière fois j'ai fait une carte de France avec tout les départements cliquables et j'ai calé les actions en JS directement sur chacun des path grâce a un id.

niuxe a écrit :
Tu prends ton après midi ?

Le soleil qui se couche pour moi c'est radical, même a 16h

_laurent a écrit :

Le soleil qui se couche pour moi c'est radical, même a 16h

@ObiJuanKenobi : un codepen fait à l'arrache (15 minutes tout au plus) dont le résultat est pas mal

ps: il me semblait qu'en svg, l'attribut href l'élément <a> était plus particulier link ou xlink un truc comme ça).
Modifié par niuxe (27 Jan 2023 - 17:42)

Relis un de mes réponses