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，文本，固定宽度/高度的字体

回答

相关问题