# SVG-afbeeldingen van horoscopen

`/v1/render/*` geeft de kaart terug als kant-en-klare SVG: nataal wiel, bi- en tri-wiel, composiet, vedische kaarten (noordelijk, zuidelijk, oostelijk), aspectenraster, cosmogram, maanfase, tijdlijn, bioritmes, verduisteringsstrook en sterrenkaart. Jij stuurt de geboortegegevens, wij berekenen de kaart en tekenen hem. De volledige lijst van routes en parameters vind je in de [API-referentie](/docs/api/).

Dezelfde tekencode is gepubliceerd als npm-pakket [`@astroway/render`](https://www.npmjs.com/package/@astroway/render): als je de kaartgegevens al hebt, kun je het wiel in de browser of op je eigen server tekenen, en het zal byte voor byte overeenkomen met wat de API teruggeeft. De renderversie van de API staat in de header `X-Render-Version`.

## Verzoek

```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"` geeft het bestand zelf terug, de standaard `json` verpakt de SVG-string in een gewone API-respons. Thema's: `light`, `dark`, `console` en `css`.

## Thema css: de kleuren van je site

Met `theme: "css"` wordt elke kleur in de SVG geschreven als CSS-variabele met de kleur van het lichte thema als fallback, bijvoorbeeld `var(--aw-ring, #222)`. Plaats de SVG inline in de HTML van je pagina (niet in een `<img>`: daar komen variabelen niet doorheen) en stel de variabelen in:

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

Zonder enige variabele ziet de kaart er precies uit als `light`. Een CSS-regel van je pagina is sterker dan de variabele, dus een afzonderlijk element kun je met een klasse hertekenen.

| Variabele | Wat het kleurt |
|---|---|
| `--aw-chart-bg` | achtergrond van de kaart |
| `--aw-fg`, `--aw-muted` | gliefen en labels, secundaire tekst en streepjes |
| `--aw-ring` | cirkels en rasterlijnen |
| `--aw-houses-fill` | veld van de vedische kaart, schijf van de sterrenkaart, verduisteringskaart |
| `--aw-benefic` | planeten van het buitenste wiel, lagna in de vedische kaart, tijdlijnevents zonder eigen kleur |
| `--aw-malefic` | retrograde-teken ℞, verduisteringsstrook |
| `--aw-aspect-harmonious`, `--aw-aspect-tense`, `--aw-aspect-neutral`, `--aw-aspect-minor`, `--aw-aspect-quintile` | lijnen en symbolen van aspecten |
| `--aw-moon-shadow`, `--aw-moon-light` | maanfase |
| `--aw-cycle-physical`, `--aw-cycle-emotional`, `--aw-cycle-intellectual` | bioritmes |

## Klassen en data-attributen

In het thema `css` hebben de westerse wielen (`wheel-western`, `bi-wheel`, `tri-wheel`, `composite`) en het aspectenraster stabiele klassen. Namen worden alleen toegevoegd, nooit hernoemd, dus je kunt er stijlen en scripts op schrijven.

- Wiel: `aw-bg`, `aw-ring`, `aw-sign aw-sign-leo`, `aw-sign-line`, `aw-tick`, `aw-house-cusp`, `aw-house-number`, assen `aw-axis aw-asc` (`aw-dsc`, `aw-mc`, `aw-ic`), hun labels `aw-label aw-axis-label`, titel `aw-title`.
- Planeet: groep `<g class="aw-planet aw-planet-sun">`, een retrograde heeft ook `aw-retrograde`, planeten van het buitenste wiel `aw-layer-1`. Binnenin `aw-glyph`, `aw-retro` (het teken ℞) en `aw-planet-tick`.
- Aspect: lijn `aw-aspect aw-aspect-trine`, een lijn tussen twee kaarten ook `aw-cross-aspect`.
- Aspectenraster: `aw-grid-header`, `aw-grid-cell`, `aw-aspect aw-aspect-square`, `aw-orb`.

De planeetgroep heeft `data-planet` (`sun`, `north-node`, `lilith`; op het buitenste wiel `b-sun`, op het derde `c-sun`) en `data-label` met naam en positie: `Mercury 8°00' Taurus, retrograde`. De aspectlijn en de rastercel hebben `data-a` en `data-b`. Zo licht je bij hover alle aspecten van een planeet uit:

```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));
}));
```

## Eigen labels: labels

Westerse wielen accepteren `options.labels`: jouw woorden voor de aslabels, voor `<title>` en `<desc>` die schermlezers voorlezen, en voor de namen in `data-label`. Sleutels die ontbreken blijven Engels; wij vertalen zelf niets.

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

`bodies` heeft Engelse sleutels (`Sun`, `North Node`), `signs` is precies twaalf namen, beginnend bij Ram, elk label maximaal 40 tekens.

## Aspecten tussen twee kaarten

`/v1/render/bi-wheel` met `options.crossAspects: true` tekent met stippellijnen de aspecten tussen de binnenste en buitenste kaart, dezelfde set die `POST /v1/synastry` teruggeeft als `crossAspects`. Een paar waarvan een van de lichamen niet getekend is, wordt overgeslagen. Standaard uitgeschakeld.

## Kant-en-klare kaart in plaats van geboortegegevens

Als je de kaart al hebt, omdat je zojuist `POST /v1/chart` hebt aangeroepen, stuur dan de `data` ervan in het veld `chart` in plaats van geboortegegevens, en wij tekenen hem alleen. Zo werken `wheel-western`, `aspect-grid` en `bi-wheel` (daar `natal.chart` en `outer.chart`, beide moeten kant-en-klare kaarten zijn). De afbeelding komt byte voor byte hetzelfde uit als met geboortegegevens.

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

Overbodige velden van de respons hoef je niet weg te knippen. Gecontroleerd wordt wat getekend wordt: 1 tot 30 lichamen, lengtes van 0 tot 360, precies 12 cuspen. Een body met zowel `chart` als geboortegegevens wordt afgewezen met een 400.

## Kosten

Een aanroep van `/v1/render/*` met geboortegegevens kost 10 credits, omdat de kaart berekend wordt. Met een kant-en-klare kaart `chart` kosten aanroepen van `/v1/render/wheel-western`, `/v1/render/aspect-grid` en `/v1/render/bi-wheel` 1 credit. Thema, klassen en labels hebben geen invloed op de prijs.