viewBox (1) 썸네일형 리스트형 [SVG] viewBox 다음 예제에서 svg를 그릴 영역을 컨테이너라고 하겠습니다. 크기 width 300px, height: 300의 노란색 영역이 컨테이너가 될 겁니다. const App = () => ( ); export default App; viewBox 0 0 200 200에서 앞에 두 요소는 min-x, min-y로 시작점을 의미합니다. 뒤의 두 요소는 width, height입니다. 설명 원의 1/4만 2 사분면에 나와 있습니다. 원의 중심인 cx, cy 속성을 따로 지정해주지 않았으므로 0입니다. 원의 중심이 컨테이너의 (0, 0)에 위치합니다. 크기는 어째서 절반이 나왔을까요. 컨테이너의 크기는 분명 300px * 300px이고 원의 반지름을 100으로 했는데, 출력된 원의 반지름은 150px입니다. view.. 이전 1 다음
