SVG, 텍스트, 고정 너비/높이가있는 글꼴

Question

SVG '텍스트'요소를 svg 'rect'요소 안에 맞추려고합니다. 예 : 아래의 예에서는 폰트 크기가 100px 인 모노 스페이스 텍스트 5 문자를 사용했으며 텍스트에 가까운 경계 사각형을 가질 것으로 예상했습니다.

하지만 텍스트 오른쪽에 공백이 있습니다.

<svg xmlns="http://www.w3.org/2000/svg" height="200" width="1000"> 
    <text x="10px" y="110px" style="font-family:monospace;font-size:100px;">HELLO</text>  
    <rect x="10px" y="10px" width="500px" height="100px" style="stroke:blue;fill:none;"/> 
</svg> 

'text'요소에는 어떤 CSS 선택기를 사용해야합니까?

참고 : text-on-a-path 방법을 사용하고 싶지 않습니다. 고정 된 크기의 글꼴 일뿐입니다.

감사합니다.

Answer 1

글꼴의 크기에 따라 너비가 아닌 높이가으로 결정됩니다. 문자는 거의 정사각형입니다.

내가 아는 한, 모노 스페이스 텍스트의 너비를 CSS를 통해 안정적으로 결정할 방법이 없습니다.

글쎄, CSS3의 글자는 0 인 ch unit입니다. 그것은 모노 스페이스 텍스트에서 작동합니다. 그러나 SVG에서는 지원되지 않습니다.

물론 픽셀 단위로 고정 폭을 설정할 수 있습니다. 300 픽셀 너비는 나를 위해 작동합니다. 그러나 다른 누군가가 고정 너비의 다른 고정 폭 글꼴을 사용하면 꺼질 수 있습니다. <rect>에도 font-family:monospace;font-size:100px;을 추가하면 em에 사각형의 너비를 설정할 수 있습니다. 하지만 나는 더 이상 신뢰할 수 있다고 생각하지 않습니다.

그러나 스크립팅을 사용할 수 있습니다. 당신의 SVG의 끝에서 (적절한 요소 ID를 추가하는) 이상, 오페라 10, 파이어 폭스 3.5, 사파리 4.0에서 작동하는 추가

<script type="text/javascript"> 
document.getElementById('rect').setAttribute(
    'width', 
    document.getElementById('text').getComputedTextLength() 
); 
</script> 

: 당신은 text element의 텍스트 길이를 얻을 수 getComputedTextLength()를 사용할 수 있습니다.

당신이있는 동안 getBBox()도 사용할 수 있습니다. 텍스트 요소의 테두리 상자를 사용하면 글꼴을 변경하려고 할 때를 대비하여 글꼴 크기와 일치하도록 사각형의 높이를 설정할 수 있습니다 크기.