SVG 텍스트의 높이와 너비를 올바르게 계산하는 방법

svg 텍스트 요소의 높이와 너비를 계산해야합니다. 페이지의 DOM에 실제로 추가하지 않고 그렇게 할 수 있습니까? 실제 요소가 아니라 측정 만 필요합니다.SVG 텍스트의 높이와 너비를 올바르게 계산하는 방법

저는 d3이나 Raphael을 사용하지 않고 일반 JavaScript 만 사용하고 있습니다. (어쩌면 내가 전 계산 중 하나를 사용해야합니까?)

내가 쓴 것은 단지 PHP에서 imagettfbbox과 같은 기능이지만 일반 JavaScript입니다. 그런 것이 있습니까? 또는 쓰는 것이 쉬울까요?

텍스트 요소를 실제로 사용하고 있지 않기 때문에 Firefox를 숨겨진 요소 bbox를 계산할 때 문제가있는 부분을 읽었거나 숨길 수 있습니다. Calculating vertical height of a SVG text). 하지만 이것이 유일한 방법일까요? 이 경우 불투명도로 작업해야합니까? 나중에 어떻게 든 요소를 파괴합니까?

출처

2014-04-17 Daniel

페이지의 DOM에 추가하는 것이 왜 문제가됩니까? –

텍스트 요소는 어떻게 작성하고 있습니까? d3.js 또는 Raphael과 같은 라이브러리를 사용하고 있습니까, 아니면 document.createElement()를 사용하고 있습니까? 아니면 완전히 다른 것을 사용하고 있습니까? 문맥을주세요 – jshanley

의견을 보내 주셔서 감사합니다. 나는 좀 더 많은 맥락을 제시하려고 노력했다. – Daniel

어쩌면 정확하게 내가 얻은 바를 달성하기위한 좋은 방법이 없을 수도 있습니다. 그러나 "내 페이지의 DOM에 실제로 추가하지 않고"다음과 같은 기능이 목표를 달성하는 것으로 보입니다.

function bboxText(svgDocument, string) { 
    var data = svgDocument.createTextNode(string); 

    var svgElement = svgDocument.createElementNS(svgns, "text"); 
    svgElement.appendChild(data); 

    svgDocument.documentElement.appendChild(svgElement); 

    var bbox = svgElement.getBBox(); 

    svgElement.parentNode.removeChild(svgElement); 

    return bbox; 
}

편집 :는

높이의 계산에 참고 : BBOX의 높이가 반환, 즉 bbox.height, 그리 항상 전체 높이가, 즉 a는 높이가 동일합니다 A. 그리고 나는 그것들을 더 정확히 계산할 방법을 찾지 못했습니다.

그러나 대문자 악센트 부호가있는 문자의 높이를 계산할 수 있습니다 (예 : Ä. 이것은 bbox의 y 좌표의 음수 일뿐입니다 (즉, -bbox.y).

이 도구를 사용하면 예를 들어 수직 정렬을위한 일부 좌표를 계산할 수 있습니다. 예를 들어, text-before-edge, text-after-edge 및 central으로 설정된 dominantBaseline 특성을 에뮬레이트합니다.

text-before-edge

: dy = -bbox.y

text-after-edge : dy = -bbox.height -bbox.y

central : dy = -bbox.y -bbox.height/2dy 수직 번역입니다

. 이 속성을 사용하여 이러한 정렬을 지원하지 않는 일부 응용 프로그램의 한계를 극복하는 데 사용할 수 있습니다.

출처

2014-04-20 17:14:24 Daniel

이것을 실제로 "요소"를 추가하지 않고도 더 나은 방법으로 발견 한 "생산"솔루션으로 사용하셨습니까? –

불행히도 나는 아직 더 좋은 방법을 찾지 못했습니다. – Daniel

SVG 텍스트의 높이와 너비를 올바르게 계산하는 방법

답변

관련 문제