Comment présenter une carte avec des territoires possédés par plusieurs équipes ?

[Roworll]

Petite réponse à l'arrache car je suis assez pressé.

C'est relativement simple à appréhender une fois qu'on a les bases.
Le code suivant te donne déjà une figure fermée en forme de spirale réalisée à partir d'une succession d'arcs de cercle.

Code :

<g id="s1" fill="#666666" stroke="#000000" >
    <g stroke="black">
        <path d = "M 100 100 a 15 15 0 1 1 30 0 a 30 30 0 1 1 -60 0 a 45 45 0 1 1 90 0 a 60 60 0 1 1 -120 0
        l 15 0 a 45 45 0 1 0 90 0 a 30 30 0 1 0 -60 0 a 15 15 0 1 0 30 0 a 7.5 7.5 0 1 1 -15 0  z" />
    </g>
</g>

La logique des arcs qui s'enchaînent est assez explicite.
La première ligne part du centre vers l'extérieur et la deuxième ligne fait le retour.
Avec un petit combo proportionalité / trigo, ça devrait être réalisable.

A la limite, je conseillerai de partir sur un gros trait (stroke) pour réaliser la spirale/courbe en une passe au lieu de faire des volumes fermés à remplir. Ça sera plus simple à gérer dans un premier temps.

Pour tester cette version, tu peux utiliser ça

Code :

<g id="s2" fill="transparent" stroke="#000000" stroke-linecap="round">
    <g stroke="black" stroke-width="20">
        <path d = "M 100 100 a 15 15 0 1 1 30 0 a 30 30 0 1 1 -60 0 a 45 45 0 1 1 90 0 a 60 60 0 1 1 -120 0" />
    </g>
</g>

[Edit]
Je viens de me rendre compte que ce serait plus parlant avec un exemple

[re-edit] : Avec une petite astuce, il est possible de combiner le meilleur des deux mondes (cf le 3e graphique rouge à bordure noire)

Code :

<g id="s3" fill="transparent" stroke-linecap="round">
    <g >
        <path d = "M 100 100 a 15 15 0 1 1 30 0 a 30 30 0 1 1 -60 0 a 45 45 0 1 1 90 0 a 60 60 0 1 1 -120 0" stroke="black" stroke-width="20"/>
        <path d = "M 100 100 a 15 15 0 1 1 30 0 a 30 30 0 1 1 -60 0 a 45 45 0 1 1 90 0 a 60 60 0 1 1 -120 0" stroke="red" stroke-width="18"/>
    </g>
</g>

J'ai mis le fichier d'exemple à jour (et au passage corrigé certaines fautes du message original).