2009-11-13 229 views
7

我試圖在svg'rect'元素中獲得一個SVG「文本」元素。例如在下面的例子中,我使用了一個5字節的等寬字體文本,字體大小爲100px,我希望邊界矩形靠近文本。SVG,文本,固定寬度/高度的字體

但是在文本右側有一個空白的空白。

<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> 

我應該使用的「文本」元素是什麼CSS選擇器?

注:我不想使用文本路徑的方法。只是一個固定大小的字體。

謝謝;

回答

8

字體的大小決定了它的高度高度,而不是它的寬度;和字符很少是方形的。

所以據我所知,沒有辦法通過CSS可靠地確定等寬文本的寬度。

那麼,CSS3有ch unit,這是0字符的寬度。這將適用於等寬文本。但它在SVG中不受支持。

當然,您可以設置固定的像素寬度。 300像素的寬度適用於我。但是,如果其他人使用固定寬度可能關閉的不同等寬字體。如果在<rect>上也添加font-family:monospace;font-size:100px;,則可以在em s中設置矩形的寬度。但我不認爲這更可靠。

但是,您可以使用腳本。您可以使用getComputedTextLength()得到text element的文本長度:

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

增加,在你的SVG的結束(和添加適當的元素ID)在Opera 10,火狐3.5和Safari 4.0的作品,至少。

當你在它的時候,你也可以使用getBBox()來獲得文本元素的邊界框,這樣你就可以設置矩形的高度來匹配字體大小,以防你決定改變字體尺寸。