TwentyTwentyOne

[Project][SVG] Text를 그려보자!SVG 에는 text 태그를 이용해 원하는 text를 표현할 수 있습니다.x,y 속성을 통해서 위치를 정하고, textAnchor 나 alignmentBaseline 등으로 text를 좌표기준 정렬 시킬수 있습니다. https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text 전체 코드 // src\project\s\svg\components\text.js // modules import React, { useRef, forwardRef, useEffect, useState } from "react"; const Text = forwardRef(({ x, y, children, config = {} }, re..

[Project][SVG] Arc 를 그려보자! SVG 로 Arc를 그리기 위해서는 path를 사용해야합니다. path의 d 속성에는 여러개의 명령어가 있는데, 그중 M 과 A 를 이용해 그려보는 react 용 Arc Component를 만들어 봅니다. https://developer.mozilla.org/ko/docs/Web/SVG/Tutorial/Paths A 명령어 원호를 그릴수 있는 명령어인 A는 A rx ry x축-회전각 큰-호-플래그 쓸기-방향-플래그 x y 로 이루어져있습니다. rx 는 x축 반지름 ry 는 y축 반지름 입니다. 큰-호-플래그 는 180도를 기준으로 중심각을 결정합니다. M 명령어 M 명령어는 Move To 호를 그릴 시작 좌표를 지정해줍니다. Arc Components Ar..