SVG 텍스트의 세로 높이 계산

문자열 배열이 있습니다. ,SVG 텍스트의 세로 높이 계산

['Jan 11','Feb 11']

말해 그리고 난은 SVG 내가 텍스트의 높이가 36 픽셀 것을 알게 렌더링 된 후 너무

<text x="60" y="154" text-anchor="middle" style="text-anchor: middle; font: normal normal normal 12px/normal Helvetica, Arial; " font="12px Helvetica, Arial" stroke="none" fill="#ffffff" transform="rotate(90 59.75 150)"> 
<tspan>Jan 11</tspan> 
</text>

처럼 이러한 문자열로 수직 텍스트를 만드는 오전. 이제 font-size가 주어질 때 미리 렌더링 될 텍스트의 높이를 계산하는 방법이 있습니까?

출처

2011-10-13 Scaraffe

getBBox 메소드를 사용하여 SVG 노드의 크기를 계산할 수 있습니다.

var textNode = document.getElementsByTagName('text'), 
    bbox = textNode.getBBox(); 

//bbox now have x, y, width and height properties

출처

2011-10-13 13:27:33 bjornd

예. 그러나 노드가 렌더링 된 이후입니다. 배열 문자열 만 사용하여 렌더링 전에 높이를 계산하는 방법을 찾고있었습니다. – Scaraffe

'visibility = "hidden hidden"으로 노드를 추가 한 다음 getBBox를 호출 한 다음 필요한 부분을 수정하면 다시 숨김을 취소 할 수 있습니다. svg는 CSS 상자 모델을 사용하지 않으므로 다른 svg 요소의 레이아웃에는 영향을주지 않습니다. 텍스트 요소의 일부 속성이 컨텍스트 (부모 요소, 계단식 스타일 등)에 의존 할 수 있기 때문에 그렇게하는 것이 좋습니다. –

숨겨진 노드에서 getBBox()를 호출하여 Firefox에서 예외가 발생 함 – sym3tri

SVG 텍스트의 세로 높이 계산

답변

관련 문제