# SVG-Kartenbilder

`/v1/render/*` gibt das Chart als fertiges SVG zurück: Radix-Rad, Bi- und Tri-Rad, Composit, vedische Charts (nördlich, südlich, östlich), Aspektgitter, Kosmogramm, Mondphase, Timeline, Biorhythmen, Finsternisband und Sternenkarte. Du schickst die Geburtsdaten, wir berechnen das Chart und zeichnen es. Die vollständige Liste der Routen und Parameter findest du in der [API-Referenz](/docs/api/).

Derselbe Zeichencode ist als npm-Paket [`@astroway/render`](https://www.npmjs.com/package/@astroway/render) veröffentlicht: Wenn du die Chartdaten bereits hast, kannst du das Rad im Browser oder auf deinem eigenen Server zeichnen, und es stimmt Byte für Byte mit dem überein, was die API zurückgibt. Die Render-Version der API wird im Header `X-Render-Version` zurückgegeben.

## Anfrage

```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"` liefert die Datei selbst, das Standard-`json` verpackt den SVG-String in die normale API-Antwort. Themes: `light`, `dark`, `console` und `css`.

## Theme css: die Farben deiner Website

Mit `theme: "css"` wird jede Farbe im SVG als CSS-Variable mit der Light-Theme-Farbe als Fallback geschrieben, zum Beispiel `var(--aw-ring, #222)`. Bette das SVG in das HTML der Seite ein (nicht in ein `<img>`: dort kommen Variablen nicht an) und setze die Variablen:

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

Ohne jede Variable sieht das Chart exakt wie `light` aus. Eine CSS-Regel deiner Seite ist stärker als die Variable, einzelne Elemente lassen sich also per Klasse umfärben.

| Variable | Was sie färbt |
|---|---|
| `--aw-chart-bg` | Hintergrund des Charts |
| `--aw-fg`, `--aw-muted` | Glyphen und Beschriftungen, sekundärer Text und Teilstriche |
| `--aw-ring` | Kreise und Gitterlinien |
| `--aw-houses-fill` | Feld des vedischen Charts, Scheibe der Sternenkarte, Finsterniskarte |
| `--aw-benefic` | Planeten des äußeren Rads, Lagna im vedischen Chart, Timeline-Ereignisse ohne eigene Farbe |
| `--aw-malefic` | Rückläufigkeitszeichen ℞, Finsternisband |
| `--aw-aspect-harmonious`, `--aw-aspect-tense`, `--aw-aspect-neutral`, `--aw-aspect-minor`, `--aw-aspect-quintile` | Linien und Symbole der Aspekte |
| `--aw-moon-shadow`, `--aw-moon-light` | Mondphase |
| `--aw-cycle-physical`, `--aw-cycle-emotional`, `--aw-cycle-intellectual` | Biorhythmen |

## Klassen und data-Attribute

Im Theme `css` haben die westlichen Räder (`wheel-western`, `bi-wheel`, `tri-wheel`, `composite`) und das Aspektgitter stabile Klassen. Namen werden nur hinzugefügt, nie umbenannt, du kannst also Styles und Skripte darauf schreiben.

- Rad: `aw-bg`, `aw-ring`, `aw-sign aw-sign-leo`, `aw-sign-line`, `aw-tick`, `aw-house-cusp`, `aw-house-number`, Achsen `aw-axis aw-asc` (`aw-dsc`, `aw-mc`, `aw-ic`), deren Beschriftungen `aw-label aw-axis-label`, Titel `aw-title`.
- Planet: Gruppe `<g class="aw-planet aw-planet-sun">`, rückläufige haben zusätzlich `aw-retrograde`, Planeten des äußeren Rads `aw-layer-1`. Darin `aw-glyph`, `aw-retro` (das Zeichen ℞) und `aw-planet-tick`.
- Aspekt: Linie `aw-aspect aw-aspect-trine`, eine Linie zwischen zwei Charts zusätzlich `aw-cross-aspect`.
- Aspektgitter: `aw-grid-header`, `aw-grid-cell`, `aw-aspect aw-aspect-square`, `aw-orb`.

Die Planetengruppe hat `data-planet` (`sun`, `north-node`, `lilith`; auf dem äußeren Rad `b-sun`, auf dem dritten `c-sun`) und `data-label` mit Name und Position: `Mercury 8°00' Taurus, retrograde`. Aspektlinie und Gitterzelle haben `data-a` und `data-b`. So werden beim Hover alle Aspekte eines Planeten hervorgehoben:

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

## Eigene Beschriftungen: labels

Die westlichen Räder akzeptieren `options.labels`: deine Wörter für die Achsenbeschriftungen, für `<title>` und `<desc>`, die Screenreader vorlesen, und für die Namen in `data-label`. Fehlende Schlüssel bleiben englisch; wir selbst übersetzen nichts.

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

`bodies` hat englische Schlüssel (`Sun`, `North Node`), `signs` sind genau zwölf Namen, beginnend mit Widder, jede Beschriftung bis zu 40 Zeichen.

## Aspekte zwischen zwei Charts

`/v1/render/bi-wheel` mit `options.crossAspects: true` zeichnet gestrichelt die Aspekte zwischen innerem und äußerem Chart, denselben Satz, den `POST /v1/synastry` als `crossAspects` zurückgibt. Ein Paar, bei dem einer der Körper nicht gezeichnet ist, wird übersprungen. Standardmäßig deaktiviert.

## Fertiges Chart statt Geburtsdaten

Wenn du das Chart bereits hast, weil du gerade `POST /v1/chart` aufgerufen hast, schicke dessen `data` im Feld `chart` statt der Geburtsdaten, und wir zeichnen es nur. Das funktioniert mit `wheel-western`, `aspect-grid` und `bi-wheel` (dort `natal.chart` und `outer.chart`, beide müssen fertige Charts sein). Das Bild wird Byte für Byte identisch mit dem aus den Geburtsdaten.

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

Überflüssige Antwortfelder musst du nicht herausschneiden. Geprüft wird, was gezeichnet wird: 1 bis 30 Körper, Längen von 0 bis 360, genau 12 Kuspis. Ein Body, der sowohl `chart` als auch Geburtsdaten enthält, wird mit 400 abgelehnt.

## Kosten

Ein Aufruf von `/v1/render/*` mit Geburtsdaten kostet 10 Credits, weil das Chart berechnet wird. Mit fertigem Chart `chart` kosten Aufrufe von `/v1/render/wheel-western`, `/v1/render/aspect-grid` und `/v1/render/bi-wheel` 1 Credit. Theme, Klassen und Beschriftungen haben keinen Einfluss auf den Preis.