# Images de cartes SVG

`/v1/render/*` renvoie une carte sous forme de SVG prêt à l'emploi : roue natale, bi- et tri-roue, composite, cartes védiques (nord, sud, est), grille d'aspects, cosmogramme, phase lunaire, chronologie, biorythmes, bande d'éclipse et carte stellaire. Tu nous envoies les données de naissance, nous calculons la carte et la dessinons. La liste complète des routes et des paramètres se trouve dans le [guide de référence de l'API](/docs/api/).

Le même code de rendu est publié en tant que package npm [`@astroway/render`](https://www.npmjs.com/package/@astroway/render) : si tu as déjà les données de la carte, la roue peut être dessinée dans le navigateur ou sur ton propre serveur, et elle correspondra à ce que l'API renvoie, octet par octet. L'API renvoie la version du rendu dans l'en-tête `X-Render-Version`.

## Requête

```bash
curl -X POST https://api.astroway.info/v1/render/wheel-western \
  -H "X-Api-Key: $ASTROWAY_KEY" -H "Content-Type: application/json" \
  -d '{"date":"1990-05-15","time":"14:30:00","timezoneOffset":3,"latitude":50.45,"longitude":30.52,
       "options":{"theme":"css","format":"svg"}}' > wheel.svg
```

`format: "svg"` renvoie le fichier lui-même, le `json` typique enveloppe la chaîne SVG dans une réponse API normale. Thèmes : `light`, `dark`, `console` et `css`.

## Thème css : les couleurs de ton site

Avec `theme: "css"`, chaque couleur du SVG est enregistrée comme une variable CSS avec la couleur du thème clair comme valeur de secours, par exemple `var(--aw-ring, #222)`. Insère le SVG dans le HTML de la page (pas dans une balise `<img>` : les variables n'y sont pas prises en compte) et définis les variables :

```css
.chart {
  --aw-chart-bg: transparent;
  --aw-ring: #444;
  --aw-fg: currentColor;
  --aw-aspect-tense: crimson;
}
```

Sans aucune variable, la carte ressemble exactement à `light`. La règle CSS de ta page est plus forte que la variable, donc un élément individuel peut être recoloré avec une classe.

| Variable | Ce qu'elle colore |
|---|---|
| `--aw-chart-bg` | fond de la carte |
| `--aw-fg`, `--aw-muted` | glyphes et légendes, texte secondaire et graduations |
| `--aw-ring` | cercles et lignes de la grille |
| `--aw-houses-fill` | champ de la carte védique, disque de la carte stellaire, carte d'éclipse |
| `--aw-benefic` | planètes du cercle extérieur, lagna dans la carte védique, événements de la chronologie sans couleur propre |
| `--aw-malefic` | signe de rétrogradation ℞, bande d'éclipse |
| `--aw-aspect-harmonious`, `--aw-aspect-tense`, `--aw-aspect-neutral`, `--aw-aspect-minor`, `--aw-aspect-quintile` | lignes et symboles d'aspects |
| `--aw-moon-shadow`, `--aw-moon-light` | phase lunaire |
| `--aw-cycle-physical`, `--aw-cycle-emotional`, `--aw-cycle-intellectual` | biorythmes |

## Classes et attributs data

Dans le thème `css`, les roues occidentales (`wheel-western`, `bi-wheel`, `tri-wheel`, `composite`) et la grille d'aspects ont des classes stables. Les noms sont seulement ajoutés, jamais renommés, tu peux donc écrire des styles et des scripts dessus.

- Roue : `aw-bg`, `aw-ring`, `aw-sign aw-sign-leo`, `aw-sign-line`, `aw-tick`, `aw-house-cusp`, `aw-house-number`, axes `aw-axis aw-asc` (`aw-dsc`, `aw-mc`, `aw-ic`), leurs légendes `aw-label aw-axis-label`, titre `aw-title`.
- Planète : groupe `<g class="aw-planet aw-planet-sun">`, rétrograde a aussi `aw-retrograde`, planètes du cercle extérieur `aw-layer-1`. À l'intérieur `aw-glyph`, `aw-retro` (signe ℞) et `aw-planet-tick`.
- Aspect : ligne `aw-aspect aw-aspect-trine`, ligne entre deux cartes aussi `aw-cross-aspect`.
- Grille d'aspects : `aw-grid-header`, `aw-grid-cell`, `aw-aspect aw-aspect-square`, `aw-orb`.

Le groupe de la planète a `data-planet` (`sun`, `north-node`, `lilith` ; sur le cercle extérieur `b-sun`, sur le troisième `c-sun`) et `data-label` avec le nom et la position : `Mercury 8°00' Taurus, retrograde`. La ligne d'aspect et la cellule de la grille ont `data-a` et `data-b`. Voici comment tous les aspects d'une planète sont mis en évidence au survol :

```js
svg.querySelectorAll('.aw-planet').forEach((g) => g.addEventListener('mouseenter', () => {
  const id = g.dataset.planet;
  svg.querySelectorAll('.aw-aspect').forEach((line) =>
    line.classList.toggle('is-on', line.dataset.a === id || line.dataset.b === id));
}));
```

## Tes propres légendes : labels

Les roues occidentales acceptent `options.labels` : tes mots pour les légendes des axes, pour `<title>` et `<desc>`, qui sont lus par les lecteurs d'écran, et pour les noms dans `data-label`. Les clés manquantes restent en anglais ; nous ne traduisons rien nous-mêmes.

```json
"options": {
  "theme": "css",
  "labels": {
    "asc": "Асц", "mc": "МС", "title": "Натальна карта",
    "bodies": { "Sun": "Сонце", "Moon": "Місяць" },
    "signs": ["Овен","Телець","Близнюки","Рак","Лев","Діва","Терези","Скорпіон","Стрілець","Козеріг","Водолій","Риби"],
    "retrograde": "ретроградний"
  }
}
```

`bodies` a des clés en anglais (`Sun`, `North Node`), `signs` sont exactement douze noms, en commençant par le Bélier, chaque légende jusqu'à 40 caractères.

## Aspects entre deux cartes

`/v1/render/bi-wheel` avec `options.crossAspects: true` dessine en pointillés les aspects entre la carte intérieure et la carte extérieure, le même ensemble que `POST /v1/synastry` renvoie comme `crossAspects`. Une paire où l'un des corps n'est pas dessiné est ignorée. Désactivé par défaut.

## Carte prête au lieu des données de naissance

Si tu as déjà la carte, parce que tu viens d'appeler `POST /v1/chart`, envoie ses `data` dans le champ `chart` au lieu des données de naissance, et nous ne ferons que la dessiner. C'est ainsi que fonctionnent `wheel-western`, `aspect-grid` et `bi-wheel` (où `natal.chart` et `outer.chart`, toutes deux doivent être des cartes prêtes). L'image sera exactement la même, octet par octet, que celle générée à partir des données de naissance.

```json
{ "chart": { "planets": [ ... ], "houses": { "cusps": [ ... ], "ascendant": 7.77, "mc": 277.12 }, "aspects": [ ... ] },
  "options": { "theme": "css" } }
```

Les champs supplémentaires de la réponse n'ont pas besoin d'être supprimés. Ce qui est dessiné est vérifié : de 1 à 30 corps, longitudes de 0 à 360, exactement 12 cuspides. Un corps où il y a à la fois `chart` et des données de naissance est rejeté avec un 400.

## Coût

L'appel à `/v1/render/*` avec des données de naissance coûte 10 crédits, car la carte est calculée. Avec une carte `chart` prête, les appels à `/v1/render/wheel-western`, `/v1/render/aspect-grid` et `/v1/render/bi-wheel` coûtent 1 crédit. Le thème, les classes et les légendes n'affectent pas le prix.