# SVG 차트 이미지

`/v1/render/*`는 완성된 SVG 형태로 차트를 반환한다: 출생 차트 휠, 바이-휠 및 트라이-휠, 컴포지트, 베다 차트 (북인도식, 남인도식, 동인도식), 어스펙트 그리드, 코스모그램, 달의 위상, 타임라인, 생체 리듬, 일식/월식 띠, 항성 차트. 당신이 출생 데이터를 보내면, 우리는 차트를 계산하고 그린다. 전체 경로 및 매개변수 목록은 [API 참조 문서](/docs/api/)에서 확인할 수 있다.

동일한 드로잉 코드는 npm 패키지 [`@astroway/render`](https://www.npmjs.com/package/@astroway/render)로도 게시되어 있다: 차트 데이터가 이미 있다면, 브라우저나 당신의 서버에서 휠을 그릴 수 있으며, API가 반환하는 것과 바이트 단위로 정확히 일치할 것이다. API는 `X-Render-Version` 헤더에 드로잉 버전을 반환한다.

## 요청

```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"`는 파일 자체를 반환하고, 기본값인 `json`은 SVG 문자열을 일반 API 응답으로 래핑한다. 테마: `light`, `dark`, `console`, `css`.

## CSS 테마: 당신의 웹사이트 색상

`theme: "css"`를 사용하면 SVG의 각 색상이 CSS 변수로 기록되며, 밝은 테마 색상이 폴백으로 사용된다. 예를 들어 `var(--aw-ring, #222)`와 같다. SVG를 페이지 HTML에 삽입하고 (`<img>` 태그에는 변수가 적용되지 않는다) 변수를 정의하라:

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

어떤 변수도 지정하지 않으면 차트는 `light` 테마와 정확히 동일하게 보인다. 페이지의 CSS 규칙이 변수보다 우선하므로, 특정 요소는 클래스로 다시 칠할 수 있다.

| 변수 | 무엇을 칠하는가 |
|---|---|
| `--aw-chart-bg` | 차트 배경 |
| `--aw-fg`, `--aw-muted` | 글리프 및 레이블, 보조 텍스트 및 눈금 |
| `--aw-ring` | 원 및 그리드 선 |
| `--aw-houses-fill` | 베다 차트 필드, 항성 차트 디스크, 일식/월식 지도 |
| `--aw-benefic` | 외부 휠의 행성, 베다 차트의 라그나, 자체 색상이 없는 타임라인 이벤트 |
| `--aw-malefic` | 역행 기호 ℞, 일식/월식 띠 |
| `--aw-aspect-harmonious`, `--aw-aspect-tense`, `--aw-aspect-neutral`, `--aw-aspect-minor`, `--aw-aspect-quintile` | 어스펙트 선 및 기호 |
| `--aw-moon-shadow`, `--aw-moon-light` | 달의 위상 |
| `--aw-cycle-physical`, `--aw-cycle-emotional`, `--aw-cycle-intellectual` | 생체 리듬 |

## 클래스 및 데이터 속성

`css` 테마에서 서양식 휠 (`wheel-western`, `bi-wheel`, `tri-wheel`, `composite`) 및 어스펙트 그리드는 고정된 클래스를 가진다. 이름은 추가만 되고, 절대 변경되지 않으므로, 이들을 기반으로 스타일과 스크립트를 작성할 수 있다.

- 휠: `aw-bg`, `aw-ring`, `aw-sign aw-sign-leo`, `aw-sign-line`, `aw-tick`, `aw-house-cusp`, `aw-house-number`, 축 `aw-axis aw-asc` (`aw-dsc`, `aw-mc`, `aw-ic`), 해당 레이블 `aw-label aw-axis-label`, 제목 `aw-title`.
- 행성: `<g class="aw-planet aw-planet-sun">` 그룹, 역행 행성은 `aw-retrograde`도 가진다, 외부 휠의 행성은 `aw-layer-1`. 내부에는 `aw-glyph`, `aw-retro` (℞ 기호) 및 `aw-planet-tick`이 있다.
- 어스펙트: 선 `aw-aspect aw-aspect-trine`, 두 차트 사이의 선은 `aw-cross-aspect`도 가진다.
- 어스펙트 그리드: `aw-grid-header`, `aw-grid-cell`, `aw-aspect aw-aspect-square`, `aw-orb`.

행성 그룹은 `data-planet` (`sun`, `north-node`, `lilith`; 외부 휠에 `b-sun`, 세 번째 휠에 `c-sun`) 및 이름과 위치를 포함하는 `data-label`을 가진다: `Mercury 8°00' Taurus, retrograde`. 어스펙트 선과 그리드 셀은 `data-a` 및 `data-b`를 가진다. 이렇게 하면 마우스 오버 시 행성의 모든 어스펙트가 강조된다:

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

## 사용자 정의 레이블: labels

서양식 휠은 `options.labels`를 받는다: 축 레이블, 스크린 리더가 읽는 `<title>` 및 `<desc>`, 그리고 `data-label`의 이름에 대한 당신의 단어들이다. 없는 키는 영어로 유지되며, 우리는 아무것도 번역하지 않는다.

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

`bodies`는 영어 키 (`Sun`, `North Node`)를 가지며, `signs`는 양자리부터 정확히 12개의 이름으로 구성되고, 각 레이블은 최대 40자이다.

## 두 차트 간의 어스펙트

`/v1/render/bi-wheel`에서 `options.crossAspects: true`를 사용하면 내부 차트와 외부 차트 사이의 어스펙트를 점선으로 그린다. 이는 `POST /v1/synastry`가 `crossAspects`로 반환하는 것과 동일한 세트이다. 한 천체가 그려지지 않은 쌍은 건너뛴다. 기본적으로 비활성화되어 있다.

## 출생 데이터 대신 미리 계산된 차트

차트가 이미 있다면, 방금 `POST /v1/chart`를 호출했기 때문에, 출생 데이터 대신 `chart` 필드에 해당 `data`를 보내라. 그러면 우리는 그것을 그리기만 한다. 이렇게 `wheel-western`, `aspect-grid`, `bi-wheel`이 작동한다 (여기서 `natal.chart`와 `outer.chart`는 둘 다 미리 계산된 차트여야 한다). 이미지는 출생 데이터로 생성된 것과 바이트 단위로 정확히 동일하게 나온다.

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

응답의 불필요한 필드를 잘라낼 필요는 없다. 그려지는 내용이 검증된다: 1개에서 30개까지의 천체, 경도 0에서 360까지, 정확히 12개의 커스프. `chart`와 출생 데이터가 모두 있는 천체는 400 오류와 함께 거부된다.

## 비용

출생 데이터와 함께 `/v1/render/*`를 호출하는 것은 차트가 계산되므로 10 크레딧이 소모된다. 미리 계산된 `chart`와 함께 `/v1/render/wheel-western`, `/v1/render/aspect-grid`, `/v1/render/bi-wheel`을 호출하는 것은 1 크레딧이 소모된다. 테마, 클래스 및 레이블은 가격에 영향을 미치지 않는다.