SVG，文本，固定寬度/高度的字體

我試圖在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選擇器？

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

謝謝;

來源

2009-11-13 Pierre

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

所以據我所知，沒有辦法通過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()來獲得文本元素的邊界框，這樣你就可以設置矩形的高度來匹配字體大小，以防你決定改變字體尺寸。

來源

2009-11-14 01:13:39 mercator

SVG，文本，固定寬度/高度的字體

回答

相關問題