foreignObject1 iPad Safari에서 SVG <foreignObject> 내부 HTML 텍스트 회전 문제 해결기 문제 상황React와 SVG를 사용하여 개발 중에 제목과 시간을 특정 각도로 표시해야 했습니다. 긴 제목의 자동 줄바꿈을 위해 SVG 안에 HTML 와 을 사용하여 텍스트를 렌더링했습니다.대부분의 데스크탑 브라우저에서는 문제가 없었지만, iPad의 Safari 브라우저에서 이상한 현상이 발생했습니다. 일정 제목(task.title)은 부모 태그의 rotate 변환에 따라 올바르게 회전했지만, 바로 옆의 소요 시간(durationText) 텍스트만 회전되지 않고 항상 수평으로 표시되었습니다.원인 분석 및 해결 과정SVG + 시도: 처음에는 SVG 네이티브 요소로 해결하려 했으나, 자동 줄바꿈이 되지 않아 긴 제목이 잘리는 문제가 있었습니다.웹 검색 및 분석: 와 Safari 렌더링 관련 문제를 검.. 2025. 4. 15. 이전 1 다음