svg 요소에 div 텍스트 생성

svg 요소에 div 텍스트 생성

• SVG text 요소만 사용하는 방법 (추천)

jsxCopyreturn (
  <svg
    width="100%"
    height="100%"
    viewBox="0 0 600 600"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <text
      x="300"
      y="300"
      fill="black"
      fontSize="18"
      fontWeight="600"
      textAnchor="middle"
      dominantBaseline="middle"
    >
      빈 배경!!!!!!!!
    </text>
  </svg>
);

• div 사용하되 부모 요소에 relative 추가

jsxCopyreturn (
  <div className="relative w-full h-full">
    <svg
      width="100%"
      height="100%"
      viewBox="0 0 600 600"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    ></svg>
    <div className="text-title_l text-text-primary font-semibold absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-center z-10">
      빈 배경!!!!!!!!
    </div>
  </div>
);

---

첫 번째 방법 추천 이유

SVG 내부에서 텍스트를 처리하므로 더 일관된 렌더링
스크롤 이슈 없음
viewBox 기준으로 정확한 위치 지정 가능

---

NewBadgeTypeEmpty.tsx 임시 작업 내용

return (
(
      <>
        {" "}
        {/* 😵‍💫 0214(금) 오후 임시 작업 ⬇️⬇️⬇️ */}
        <div className="relative w-full h-full">
          <svg
            width="100%"
            height="100%"
            viewBox="0 0 600 600"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          ></svg>
          {/* 😵‍💫 0214(금) 오후 임시 작업 ⬇️⬇️⬇️ */}
          <div className="text-base text-title_l text-text-primary font-semibold absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-center z-10">
            빈 배경
          </div>
        </div>
      </>
      )

➡️ 그런데'빈 배경'의 목적과 위치가, 내 코딩 시작점에 부합하지 않았다.

'빈 배경'이란 글자는 템플릿에서 실제로 사용되는 요소가 아니라
DesignSelector.tsx에서, 유저에게 이 템플릿은 빈 배경임을 알리기 위한 것이다.

그러므로 실제로 NewBadgeTypeEmpty.tsx 대신 DesignSelector에서 보여줘야 한다.