SVG、文本、固定宽度/高度字体

Question

我试图将一个 SVG 的“text”元素放入一个 SVG 的“rect”元素中。例如，在下面的示例中，我使用了一个字号为 100px 的等宽字体的 5 个字符的文本，并期望其周围有一个接近文本的边界矩形。

但是文本右侧有一个空白间隙。

<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选择器来处理“文本”元素？

注意：我不想使用文本路径方法。只需要一个固定大小的字体。

谢谢；

- Pierre

Answer 1

字体大小决定其高度而非宽度，字符也很少是正方形。所以据我所知，通过 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），至少在Opera 10、Firefox 3.5和Safari 4.0中有效。

而且，如果你愿意，你也可以使用getBBox()来获取文本元素的边界框，这样你就可以设置矩形的高度以匹配字体大小，以防你决定更改字体大小。

- mercator