SVG,文本,固定宽度/高度的字体

Question

我正在尝试在svg'rect'元素内部安装一个SVG'text'元素.例如,在下面的例子中,我使用了5个字符的等宽文本,字体大小为100px,我希望有一个接近文本的边界矩形.

但是文本右边有一个空白的空白.

<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有ch单位,这是0角色的宽度.这适用于等宽文本.但它在SVG中不受支持.

当然,您可以设置固定宽度(以像素为单位).300像素的宽度适合我.但是,如果其他人使用不同的等宽字体,固定宽度可能会关闭.如果添加font-family:monospace;font-size:100px;上<rect>也可以设置在矩形的宽度em秒.但我不认为这更可靠.

但是,您可以使用脚本.您可以使用getComputedTextLength()获取文本元素的文本长度:

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

在SVG的末尾添加它(并添加适当的元素ID)至少可以在Opera 10,Firefox 3.5和Safari 4.0中使用.

当你在它的时候,你也可以使用它getBBox()来获取文本元素的边界框,这样你就可以设置矩形的高度以匹配字体大小,以防你决定改变字体大小.