2010-07-22 6 views
13

SVG에서 글꼴 메트릭을 가져올 수있는 방법이 있습니까? 다음과 같이하고 싶습니다 : 하강, 상승, 최대 높이, 진입.SVG 및 글꼴 메트릭

flowchart32와 같이 그래픽 &을 함께 그리려면이 코드가 필요합니다.

예를 들어, 텍스트 주위에 상자를 그리고 상자 크기의 중심이 아닌 전 크기 (문자 'x'크기) 중간에서 연결선을 그릴 필요가 있습니다.

답변

3

DOM에 액세스 할 수있는 경우 SVG DOM methods for text elements입니다. 그런 다음 대부분의 svg 요소에서 사용할 수있는 getBBox 메서드가 있습니다. 당신이 SVGFonts를 처리하는 경우

는, 데이터 정상 속성으로 XML 형식으로 이미 사용할 수있는 예를 들어 ascent, descent가 그래픽을 처리 할 수 ​​있기 때문에 내가 getBBox을 권하고 싶습니다 등 사용자의 사용 사례를 들어

요소 (차트에 텍스트가 아닌 요소를 더 추가하려는 경우)

+2

'getBBox'를 사용하는 것이 좋습니다. 왜냐하면 텍스트의 절대 경계 만 존중하기 때문입니다. 그러나 텍스트를 올바르게 배치하려면 한 번 오르막과 강하를 존중해야합니다. SVGTextElement의 'y' 속성은 _baseline_의 수직 위치를 지정합니다. 그러므로'BBox' 만 사용하면 도움이되지 않습니다. 문제는 SVG DOM 메서드가 상승 및 하강 정보를 쿼리 할 수 ​​없다는 것입니다. 나는 Spec에서 이것이 부족한 이유를 모른다. – radlan

+2

하강을 계산하려면 여기를 클릭하십시오. SVG의 텍스트 요소에 대해 "y"를 0으로 설정하십시오. 이제 기준선은 0입니다. 그런 다음 getBBox에서 "y2"속성을 가져 와서 "descent"의 높이가됩니다. – Chad