# Hình ảnh biểu đồ SVG

`/v1/render/*` trả lại biểu đồ dưới dạng SVG hoàn chỉnh: bánh xe sinh, bánh xe bi và tri, biểu đồ tổng hợp, biểu đồ Vệ-đà (bắc, nam, đông), lưới khía cạnh, đồ thị vũ trụ, phăng mặt trăng, dòng thời gian, nhịp sinh học, dải nhật thực và bản đồ sao. Bạn gửi dữ liệu sinh, chúng tôi tính toán và vẽ biểu đồ. Danh sách đầy đủ các tuyến đường và tham số có trong [tài liệu API](/docs/api/).

Mã vẽ giống hệt đã được xuất bản dưới dạng gói npm [`@astroway/render`](https://www.npmjs.com/package/@astroway/render): nếu bạn đã có dữ liệu biểu đồ, bánh xe có thể được vẽ trong trình duyệt hoặc trên máy chủ của bạn, và nó sẽ khớp với API trả về, byte cho byte. Phiên bản vẽ API trả về trong tiêu đề `X-Render-Version`.

## Yêu cầu

```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"` trả về tệp trực tiếp, `json` mặc định bọc chuỗi SVG trong phản hồi API thông thường. Chủ đề: `light`, `dark`, `console` và `css`.

## Chủ đề css: màu sắc của trang web của bạn

Với `theme: "css"`, mỗi màu trong SVG được ghi dưới dạng biến CSS với màu chủ đề sáng làm dự phòng, ví dụ `var(--aw-ring, #222)`. Chèn SVG vào trang HTML (không trong `<img>`: biến không đi qua đó) và đặt các biến:

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

Không có biến nào, biểu đồ trông giống hệt `light`. Quy tắc CSS của trang của bạn mạnh hơn biến, vì vậy một phần tử riêng có thể được tô lại bằng lớp.

| Biến | Màu gì |
|---|---|
| `--aw-chart-bg` | nền biểu đồ |
| `--aw-fg`, `--aw-muted` | biểu tượng và chú thích, văn thứ yếu và dấu phân cách |
| `--aw-ring` | vòng tròn và đường lưới |
| `--aw-houses-fill` | trường biểu đồ Vệ-đà, đĩa bản đồ sao, bản đồ nhật thực |
| `--aw-benefic` | hành tinh vòng ngoài, Lagna trong biểu đồ Vệ-đà, sự kiện dòng thời gian không màu riêng |
| `--aw-malefic` | dấu nghịch hành ℞, dải nhật thực |
| `--aw-aspect-harmonious`, `--aw-aspect-tense`, `--aw-aspect-neutral`, `--aw-aspect-minor`, `--aw-aspect-quintile` | đường và biểu tượng khía cạnh |
| `--aw-moon-shadow`, `--aw-moon-light` | phăng mặt trăng |
| `--aw-cycle-physical`, `--aw-cycle-emotional`, `--aw-cycle-intellectual` | nhịp sinh học |

## Lớp và thuộc tính dữ liệu

Trong chủ đề `css`, bánh xe phương Tây (`wheel-western`, `bi-wheel`, `tri-wheel`, `composite`) và lưới khía cạnh có các lớp cố định. Tên chỉ được thêm vào, không bao giờ được đổi tên, vì vậy bạn có thể viết kiểu và kịch bản cho chúng.

- Bánh xe: `aw-bg`, `aw-ring`, `aw-sign aw-sign-leo`, `aw-sign-line`, `aw-tick`, `aw-house-cusp`, `aw-house-number`, trục `aw-axis aw-asc` (`aw-dsc`, `aw-mc`, `aw-ic`), chú thích của chúng `aw-label aw-axis-label`, tiêu đề `aw-title`.
- Hành tinh: nhóm `<g class="aw-planet aw-planet-sun">`, nghịch hành có thêm `aw-retrograde`, hành tinh vòng ngoài `aw-layer-1`. Bên trong `aw-glyph`, `aw-retro` (dấu ℞) và `aw-planet-tick`.
- Khía cạnh: đường `aw-aspect aw-aspect-trine`, đường giữa hai biểu đồ còn có `aw-cross-aspect`.
- Lưới khía cạnh: `aw-grid-header`, `aw-grid-cell`, `aw-aspect aw-aspect-square`, `aw-orb`.

Nhóm hành tinh có `data-planet` (`sun`, `north-node`, `lilith`; trên vòng ngoài `b-sun`, trên vòng thứ ba `c-sun`) và `data-label` với tên và vị trí: `Mercury 8°00' Taurus, retrograde`. Đường khía cạnh và ô lưới có `data-a` và `data-b`. Như vậy, tất cả các khía cạnh của hành tinh được làm nổi bật khi di chuột:

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

## Chú thích của riêng bạn: labels

Bánh xe phương Tây chấp nhận `options.labels`: từ ngữ của bạn cho chú thích trục, cho `<title>` và `<desc>` mà trình đọc màn hình đọc, và cho tên trong `data-label`. Các khóa không có sẽ giữ nguyên tiếng Anh; chúng tôi không dịch bất cứ thứ gì.

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

`bodies` có khóa tiếng Anh (`Sun`, `North Node`), `signs` chính xác là mười hai tên, bắt đầu từ Bạch Dương, mỗi chú thích dưới 40 ký tự.

## Khía cạnh giữa hai biểu đồ

`/v1/render/bi-wheel` với `options.crossAspects: true` vẽ các khía cạnh giữa biểu đồ trong và ngoài bằng dấu gạch ngang, cùng bộ như `POST /v1/synastry` trả về dưới dạng `crossAspects`. Cặp mà một trong các vật thể không được vẽ sẽ bị bỏ qua. Mặc định tắt.

## Biểu đồ đã sẵn sàng thay vì dữ liệu sinh

Nếu biểu đồ của bạn đã có vì bạn vừa gọi `POST /v1/chart`, hãy gửi `data` của nó vào trường `chart` thay vì dữ liệu sinh, và chúng tôi chỉ vẽ nó. Cách này hoạt động với `wheel-western`, `aspect-grid` và `bi-wheel` (ở đó `natal.chart` và `outer.chart`, cả hai phải là biểu đồ đã sẵn sàng). Hình ảnh sẽ giống hệt byte với dữ liệu sinh.

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

Không cần cắt các trường phản hồi không cần thiết. Kiểm tra những thứ được vẽ: từ 1 đến 30 vật thể, kinh độ từ 0 đến 360, chính xác 12 cusp. Vật thể có cả `chart` và dữ liệu sinh sẽ bị từ chối với 400.

## Chi phí

Gọi `/v1/render/*` với dữ liệu sinh tốn 10 điểm tín dụng, vì biểu đồ được tính toán. Với biểu đồ đã sẵn `chart`, các cuộc gọi `/v1/render/wheel-western`, `/v1/render/aspect-grid` và `/v1/render/bi-wheel` tốn 1 điểm tín dụng. Chủ đề, lớp và chú thích không ảnh hưởng đến giá.