SVG 텍스트 요소가 올바르게 배치되지 않음

debugcn 에 게시 Dev

에두아르드 루카

여기 에있는 것의 미니멀 한 예를 설정했습니다 . SVG의 맨 위에 텍스트 요소를 배치해야합니다. 그러나 텍스트 요소를 살펴보면 실제로 SVG 외부에서 시작하는 것을 볼 수 있습니다 (예 : Chrome의 경우 -3px, FF의 경우 -4px). 아래 스크린 샷을 참조하세요. 픽셀 단위로 완벽해야하는 무언가를 만들고 있으므로 SVG가 시작되는 위치에서 정확히 시작하도록 텍스트를 가져와야합니다. 보시다시피, rect예정된 곳 에서 시작됩니다.

그래서 게시물 내부에 코드없이 jsfiddle에 대한 링크를 게시 할 수 없으므로 다음은 코드입니다.

<svg width="100%" height="360" style="background-color: rgb(0, 249, 253);margin-top: 50px;">
  <rect y1="0" y2="100" x="0" width="100" height="100"></rect>
  <text x="100" y="0" dominant-baseline="hanging">2022</text>
</svg>

왜 이런 일이 일어나는지 아십니까?

r3mainer

SVG 사양 에 따르면 의 지배적 인 기준선은 hangingDevanagari와 같은 인도어 스크립트에서만 의미가 있습니다. 텍스트 상자의 위쪽 가장자리를 특정 Y 좌표에 맞추려면 다음을 text-before-edge대신 사용하십시오.

<svg width="300" height="55" viewBox="0 0 300 55">
  <rect x="20" y="5" width="30" height="30" fill="#f00"/>
  <text x="50" y="5" dominant-baseline="hanging">8888</text>
  <text x="35" y="50" text-anchor="middle">hanging</text>
  <rect x="220" y="5" width="30" height="30" fill="#f00"/>
  <text x="250" y="5" dominant-baseline="text-before-edge">8888</text>
  <text x="235" y="50" text-anchor="middle">text-before-edge</text>
</svg>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-06-6

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

SVG 텍스트 요소가 올바르게 배치되지 않음

SVG 텍스트 요소가 올바르게 배치되지 않음

Chrome 51에서 본 SVG가 텍스트 뒤에 추가 된 간격으로 올바르게 배치되지 않는 이유는 무엇입니까?

SVG가 올바르게 표시되지 않음

SVG가 올바르게 표시되지 않음

포함 된 SVG가 올바르게 확장되지 않음

IE에서 SVG가 올바르게 렌더링되지 않음

CSS 부트 스트랩-텍스트가 올바르게 깨지지 않음

Juju 서비스가 올바르게 배포되지 않음

xterm이 텍스트를 올바르게 배치하지 않음

Swift-UILabel 텍스트가 올바르게 표시되지 않음

CSS 회전 된 텍스트가 올바르게 표시되지 않음

£ 기호가 올바르게 표시되지 않는 텍스트 글꼴 모음

Libreoffice 메뉴 텍스트가 올바르게 표시되지 않음

레이블 텍스트가 올바르게 표시되지 않음

MySQL 스크립트가 올바르게 입력되지 않음

캐스트가 올바르게 표시되지 않음

SVG 로고가 모바일에서 올바르게 표시되지 않음

세 번째 열 div가 올바르게 배치되지 않음

"layout_toEndOf"가 올바르게 배치되지 않음

Mozilla에서 커서가 올바르게 배치되지 않음

뷰 박스가있는 svg의 올바른 위치에 원을 올바르게 추가하지 않습니까?

HTML 텍스트가 올바르게 래핑되지 않음, 가로 스크롤바 문제

HTML로 인라인 된 SVG가 올바르게 표시되지 않음 (Chrome)

데이터 세트가 올바르게 참조되지 않음

Highcharts 차트 범주가 올바르게 표시되지 않음

트리 구조가 올바르게 인쇄되지 않음

텍스처 이미지가 올바르게 표시되지 않음-OpenGL

왼쪽 부동 div가 올바르게 스택되지 않음

SVG 텍스트가 Firefox를 중앙에 배치하지 않음

부트 스트랩 4 개 열이 올바르게 배치되지 않음