SVG，文本，具有固定宽度/高度的字体 [英] SVG, text , font with fixed width/height

问题描述

我想在svg'rect'元素里面得到一个SVG'text'元素。例如在下面的示例中，我使用了一个5个字符的等宽文本，字体大小为100px，我希望在文本附近有一个边界矩形。

但在文本右侧有一个空格。

 < svg xmlns =http://www.w3.org/2000/svgheight =200width =1000> 
< text x =10pxy =110pxstyle =font-family：monospace; font-size：100px;> HELLO< / text& 
< rect x =10pxy =10pxwidth =500pxheight =100pxstyle =stroke：blue; fill：none;/> 
< / svg>我应该为文本元素使用什么CSS选择器？
 
 
 
 
注意：我不想使用text-on-a-path方法。只是一个固定大小的字体。
 
 
 
谢谢; 
解决方案
字体的大小决定了它的 height ， 
 
 
 
据我所知，没有办法通过CSS可靠地确定均匀宽度文本的宽度。
 
 
 
好吧，CSS3有  ch 单位，它是 0 字符的宽度。这将适用于等宽文本。但是它不支持在SVG中。
 
 
 
当然，你可以设置固定宽度的像素。宽度为300像素适用于我。但是如果有人使用不同的等宽字体，固定宽度可以关闭。如果您在< rect> 上添加 font-family：monospace; font-size：100px; 您可以在 em 中设置矩形的宽度。但我不认为这更可靠。
 
 
 
但是，你可以使用脚本。您可以使用  getComputedTextLength（） 以获取文本元素的文本长度：
 < script type =text / javascript> 
 document.getElementById（'rect'）。setAttribute（
'width'，
 document.getElementById（'text'）。getComputedTextLength（）
）; 
< / script> 
  
在SVG的末尾添加（并添加相应的元素ID） Firefox 3.5和Safari 4.0。
 
 
 
虽然你可以使用 getBBox（）也可以获得文本元素的边框，因此您可以设置矩形的高度以匹配字体大小，以防您更改字体大小。
 
I'm trying to get a SVG 'text' element fitting inside of a svg 'rect' element. e.g. In the example below, I used a monospace text of 5 chars with a font-size of 100px and I expected to have a bounding rectangle close to the text. 

But there is a blank gap at the right of the text.
<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>
What CSS selectors should I use for the 'text' element ?

Note: I don't want to use the text-on-a-path method. Just a font with a fixed size.

Thanks; 
解决方案
The size of a font determines its height, not its width; and characters are rarely square.

So as far as I know, there's no way to determine the width of even monospace text reliably through CSS.

Well, CSS3 has the ch unit, which is the width of the 0 character. That would work for monospace text. But it's not supported in SVG.

You could just set a fixed width in pixels, of course. A width of 300 pixels works for me. But then if someone else uses a different monospaced font that fixed width could be off. If you add the font-family:monospace;font-size:100px; on the <rect> too, you can set the width of the rectangle in ems. But I don't think that's any more reliable.

You can, however, use scripting. You can use getComputedTextLength() to get the text length of a text element:
<script type="text/javascript">
document.getElementById('rect').setAttribute(
    'width',
    document.getElementById('text').getComputedTextLength()
);
</script>
Adding that at the end of your SVG (and adding the appropriate element IDs) works in Opera 10, Firefox 3.5 and Safari 4.0, at least.

And while you're at it, you could use getBBox() too, to get the text element's bounding box so you can set the height of the rectangle to match the font size too, in case you ever decide to change the font size.

                        
这篇关于SVG，文本，具有固定宽度/高度的字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！