SVG 차트 이미지

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

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

요청

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> 태그에는 변수가 적용되지 않는다) 변수를 정의하라:

.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를 가진다. 이렇게 하면 마우스 오버 시 행성의 모든 어스펙트가 강조된다:

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의 이름에 대한 당신의 단어들이다. 없는 키는 영어로 유지되며, 우리는 아무것도 번역하지 않는다.

"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는 둘 다 미리 계산된 차트여야 한다). 이미지는 출생 데이터로 생성된 것과 바이트 단위로 정확히 동일하게 나온다.

{ "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 크레딧이 소모된다. 테마, 클래스 및 레이블은 가격에 영향을 미치지 않는다.

도움이 되었나요?

수정 제안하기

마지막 업데이트: 2026. 10. 12.